Question

我在jQuery中有这样的东西

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

它会对焦点输入产生影响。但是，当我切换到获得焦点的新输入时，第一个仍然具有该效果，而不是新效果。什么是使其自动更新的好方法，以便当前关注的那个具有效果？谢谢！

Answer 1

您可以使用简单的CSS3规则：

input:focus {
  background-color: red;
}

Answer 2

＆＃34;做点什么＆＃34;焦点; ＆＃34;撤消那件事＆＃34;模糊

您的示例仅运行一次，并且仅定位一个input：具有焦点的$('input').on('focus', function () { // do something $(this).css('background-color','yellow'); }); $('input').on('blur', function () { // do something $(this).css('background-color','white'); });。它没有对变化作出反应。

使用jQuery的.on()方法绑定可以响应更改的事件侦听器。

一个基本示例：

＆＃13;

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

＆＃13;

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

＆＃13;

使用链接的另一个例子：

＆＃13;

input.highlight {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

input.highlight {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

SendKeys.SendWait("{F4}^a" + yourPath + "{ENTER}");

＆＃13;

Answer 3

这有帮助吗？

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

Answer 4

如果你正在使用jQuery，你可以将事件处理程序附加到焦点和模糊事件。

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

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

和

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

请注意，如果您需要侦听事件冒泡，可以使用focusin和focusout。

目标输入：焦点，即使在更改时也是如此

4 个答案:

＆＃34;做点什么＆＃34;焦点; ＆＃34;撤消那件事＆＃34;模糊