當用戶開始輸入時，使突出顯示的輸入字段'unhighlighted'

如果單擊「加入」按鈕並將字段留空，我製作了一個帶有JavaScript的突出顯示紅色字段的簡單表單。當用戶開始輸入時，使突出顯示的輸入字段'unhighlighted'

即使您填充它，直到按下「加入」按鈕，它仍然會保持紅色。所以，不要點擊，我只是想讓用戶開始輸入時突出顯示。

的jsfiddle： http://jsfiddle.net/LCBradley3k/xqcJS/6/ 的Javascript：

$(document).ready(function(){ 


     /* setTimeout(function(){ 
     $('.inputs').show("slide", { direction: "down" }, 1000); 
     }, 2000); 
    });*/ 

    $('#join').click(function(){ 

     var correct = true; 

     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       correct = false; 
      } else{ 
       $currentField.removeClass('empty'); 
      } 

     }); 
     if (correct) { 
      $('#answer').html('Thank You!'); 
      setTimeout(function(){ 
     $('.inputs').hide("slide", { direction: "up" }, 1000); 
     }, 2000); 
     } else { 
     $('#answer').html('Please fill highlighted fields.') ;  
     } 



    });

來源

2013-03-06 James Mitchell

添加keyup處理程序上的表單輸入刪除類：

$('input[type="text"]').keyup(function (event) { 
    var $currentField = $(this); 
    if ($currentField.val() !== '') { 
     $currentField.removeClass('empty'); 
    } 
});

DEMO

來源

2013-03-06 19:54:12

當然，只是結合KEYDOWN。

http://jsfiddle.net/xqcJS/7/

if ($currentField.val() === ''){ 
    $currentField.addClass('empty'); 
    correct = false; 
    $currentField.one('keydown',function(){ 
     $currentField.removeClass('empty'); 
    });

來源

2013-03-06 19:54:31

不是函數.on？ – theshadowmonkey 2013-03-06 19:56:13

@theshadowmonkey'.one（）'只使用一次：*將一個處理程序附加到元素的事件中。該處理程序每個元素最多執行一次。* – 2013-03-06 19:56:38

@theshadowmonkey [jQuery .one（）]（http://api.jquery.com/one/） – Mathletics 2013-03-06 19:57:10

$('input[type="text"]').keydown(function() { 
    if ($(this).val != "") 
     $(this).removeClass('empty'); 
});

來源

2013-03-06 19:55:22 nbrooks

您可以使用對焦或使用KEYUP。

$('input[type="text"]').keyup(function(e){ 
    $(this).removeClass('empty'); 
})

如果您想使用焦點，您可以用焦點替換鍵控，因爲每次鍵入時都不會觸發事件。

來源

2013-03-06 19:58:52 misoukrane

添加以下代碼塊：

$('input[type="text"]').focus(function() {    
    $(this).removeClass('empty'); 
});

類「空」當你專注於現場將被刪除。

來源

2013-03-06 20:23:25 MmynameStackflow

當用戶開始輸入時，使突出顯示的輸入字段'unhighlighted'

回答

相關問題