在这个demo中,如果你把你的光标放在第一个字段然后跳出来(没有做任何改变),keyup事件会在第二个字段上触发。也就是说,你跳出来进入第二个字段。这个行为正确吗?我怎样才能防止这种情况发生?同样的情况也适用于shift + tab。
注:
a)我相信所有其他键,可打印的和不可打印的,都会触发第一个字段上的keyup事件。
b)如果您一直按下选项卡,直到它移出两个字段,则根本不会触发该事件。
超文本:
<form id="myform">
<input id="firstfield" name="firstfield" value="100" type="text" />
<input id="secondfield" name="secondfield" value="200" type="text" />
</form>
jQuery:
jQuery(document).ready(function() {
$('#firstfield').keyup(function() {
alert('Handler for firstfield .keyup() called.');
});
$('#secondfield').keyup(function() {
alert('Handler for secondfield .keyup() called.');
});
});
4条答案
按热度按时间mklgxw1f1#
键的默认操作在
keydown
事件期间执行,因此,很自然地,到keyup
传播时,Tab键已经将焦点更改到下一个字段。您可以使用:
这样,如果按下Tab键,则可以在处理其他键之前进行任何必要的调整。See your updated fiddle for an exampe.
编辑
根据你的评论,我修改了这个函数。JavaScript最终变得有点复杂,但我会尽我所能解释。Follow along with the new demo here.
基本上,可以将
class="captureKeys"
赋给任何想要监视按键的元素,首先看第二个函数:当keydown
在captureKeys
元素上触发时,它会被赋予一个名为focus
的虚拟类,这只是为了跟踪最近获得焦点的元素(我在演示中为.focus
提供了一个背景作为视觉辅助)。因此,无论按下哪个键,当前按下的元素都被赋予.focus
类,只要它还具有.captureKeys
。接下来,当
keyup
被激发时在任何地方(不仅仅是.captureKeys
元素),函数检查它是否是一个选项卡,如果是,则焦点已经移动,并且对最后一个具有焦点的元素调用定制.keyAction()
函数(.focus
)。如果它不是一个制表符,则在当前元素上调用.keyAction()
(但是,同样,只有当它有.captureKeys
时)。这应该能达到你想要的效果,你可以在
keyAction()
函数中使用变量theKey
来跟踪which key was pressed,并采取相应的措施。对此有一个主要的警告:* * 如果
.captureKeys
元素是DOM中的最后一个元素**,那么在大多数浏览器中按Tab键将从文档中移除焦点,并且keyup
事件将永远不会触发,这就是我在演示底部添加虚拟链接的原因。这提供了一个基本的框架,所以你可以根据自己的需要修改它。希望它能有所帮助。
ltskdhd12#
这是预期行为。如果我们看一下发生的一系列事件:
1.焦点在第一个文本框上时按Tab键
1.在第一个文本框上触发按键事件
1.将焦点移动到第二个文本框
1.将手指抬离Tab键
1.在第二个文本框上触发Keyup事件
对第二个文本框触发Key up,因为这是焦点移动到该输入后发生的位置。
您无法阻止这一系列事件的发生,但可以检查事件以查看按下了哪个键,如果是Tab键,则调用
preventDefault()
。doinxwow3#
我最近在为一个placeholder polyfill处理这个问题,我发现如果你想捕获原始字段中的keyup事件,你可以监听keydown事件,如果按下了tab键,就触发keyup事件。
而不是:
对此的更改:
fcg9iug34#
我最终使用了这个解决方案:
超文本:
jQuery:
如果键是tab键、shift键或同时使用这两个键,则此解决方案不会运行警报。
解决方案:http://jsfiddle.net/KtSja/13/