使用：focus進行目標輸入，即使更改

Question

我在jQuery中有類似的東西

if($("input").is(":focus")){
// do something
}

它會對應該集中的輸入產生影響。 但是，當我切換到獲取焦點的新輸入時，第一個輸入仍然具有該效果，而不是新輸入。 有什么好方法可以使其自動更新，從而使當前關注的結果生效？ 謝謝！

Answer 1

您可以使用一個簡單的CSS3規則：

input:focus {
  background-color: red;
}

Answer 2

“專注”； 模糊“撤消”

您的示例僅運行一次，並且僅針對一種input ：具有焦點的一種。 它不響應更改。

使用jQuery的.on()方法綁定可以響應更改的事件偵聽器。

一個基本的例子：

 $('input').on('focus', function () { // do something $(this).css('background-color','yellow'); }); $('input').on('blur', function () { // do something $(this).css('background-color','white'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <input type="text" /> 

使用鏈接的另一個示例：

 $('input') .on('focus', function () { $(this).addClass('highlight'); }) .on('blur', function () { $(this).removeClass('highlight'); }); 

 input.highlight { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <input type="text" /> 

使用空格分隔的事件列表的另一個示例：

 $('input') .on('focus blur', function () { $(this).toggleClass('highlight'); }); 

 input.highlight { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <input type="text" /> 

Answer 3

這有幫助嗎？

$('input').on('focusin' function(){
  $(this).toggleClass('someClass')
});
$('input').on('focusout' function(){
  $(this).toggleClass('someClass')
});

Answer 4

如果使用的是jQuery，則可以將事件處理程序附加到focus和blur事件上。

http://api.jquery.com/category/events/form-events/

$(someSelector).on('focus', function(evt) { 
//do stuff
})

和

$(someSelector).on('blur', function(evt) { 
//do stuff
})

請注意，如果您需要監聽事件冒泡，則可以使用focusin和focusout。