我在jQuery中有这样的东西
if($("input").is(":focus")){
// do something
}
它会对焦点输入产生影响。但是,当我切换到获得焦点的新输入时,第一个仍然具有该效果,而不是新效果。什么是使其自动更新的好方法,以便当前关注的那个具有效果?谢谢!
答案 0 :(得分:3)
您可以使用简单的CSS3规则:
input:focus {
background-color: red;
}
答案 1 :(得分:1)
您的示例仅运行一次,并且仅定位一个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()
方法绑定可以响应更改的事件侦听器。
一个基本示例:
<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;
使用链接的另一个例子:
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;
使用以空格分隔的事件列表的另一个示例:
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;
答案 2 :(得分:0)
这有帮助吗?
$('input').on('focusin' function(){
$(this).toggleClass('someClass')
});
$('input').on('focusout' function(){
$(this).toggleClass('someClass')
});
答案 3 :(得分:0)
如果你正在使用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。