JavaScript/jQuery:用于键盘导航的按键(event.which 不起作用)
处理按键[Up|Down|Press]事件时,我应该使用.which还是.keyCode?我可以有一些用于处理 jQuery 中的三个键盘事件的示例代码吗?不用 jQuery 你能做到吗?我希望它能够在每个浏览器中可靠地工作。
更新
奇怪的是,jQuery 的 event.which 规范化不适用于我的handleKeyPress(事件)处理程序:
// Add which for key events
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
event.which = event.charCode || event.keyCode;
}
我在handleKey内的规范化之前和之后得到了这个按(它没有将 event.which 设置为 event.keyCode 中的值):
- event.which = 0
- event.charCode = 0
- event.keyCode = 40
但是,如果我使用handleKeyDown<,则代码可以工作/i> 相反。我认为这与按键与按键有关;该代码适用于我的handleKeyDown(事件)处理程序。
不幸的是,我需要使用keypress(而不是keydown),因为我想使用箭头键进行导航:如果用户按下并按住箭头键,则会出现keydown< /em> 事件触发一次,但每个插入的字符都会触发单独的按键事件。
When handling key[Up|Down|Press] events, should I use .which or .keyCode? Can I have some example code for handling the three keyboard events in jQuery? Can you do it without jQuery? I want it to work reliably in every browser.
Update
Strangely, jQuery's event.which normalization wasn't working for my handleKeyPress(event) handler:
// Add which for key events
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
event.which = event.charCode || event.keyCode;
}
I'm getting this before and after this normalization inside handleKeyPress (it's not setting event.which to the value in event.keyCode):
- event.which = 0
- event.charCode = 0
- event.keyCode = 40
However, the code works if I use handleKeyDown instead. I think it has to do with keypress vs. keydown; the code works for my handleKeyDown(event) handler.
Unfortunately, I need to use keypress (not keydown), since I want to use the arrow-keys for navigation: if the user presses and holds an arrow key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
jQuery 规范化
event.which
(请参阅:api.jquery.com/event. which/),这就是您所需要的。jQuery normalizes
event.which
(see: api.jquery.com/event.which/), so that's all you need.请参阅此与您的问题相关的主题。
一般来说,我经常争论 .which,因为它允许您跟踪 charCodes 和 keyCodes。 event.which 内置于 jQuery 中,以便标准化这些不同的方法。
您可以在此处找到有关 keyCode 的更多信息。
Please refer to this thread related to your issue.
In general, I often argue for .which, as it will allow you to keep track of both charCodes and keyCodes. event.which was built into jQuery in order to normalize those different methodologies.
You can find more information about keyCodes here.
请参阅 jQuery API 以获取有关您可以绑定的 keypress() 的文档。
http://api.jquery.com/keypress/
另外,这里有一个很好的演练使用 jquery 的按键导航:
http://net .tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
编辑:API 中的重要/更多相关行:
如果需要捕获任意位置的按键(例如,要在页面上实现全局快捷键),将此行为附加到文档对象非常有用。由于事件冒泡,所有按键都会沿着 DOM 到达文档对象,除非明确停止。
为了确定输入了哪个字符,我们可以检查传递给处理函数的事件对象。虽然浏览器使用不同的属性来存储此信息,但 jQuery 规范了 .which 属性,因此我们可以可靠地使用它来检索字符代码。
请注意,keydown 和 keyup 提供指示按下哪个键的代码,而 keypress 指示输入哪个字符。例如,小写“a”通过 keydown 和 keyup 将报告为 65,而通过 keypress 将报告为 97。所有事件将大写“A”报告为 65。由于这种区别,当捕获特殊击键(例如箭头键)时,.keydown() 或 .keyup() 是更好的选择。
Refer to jQuery API for documentation on keypress(), which you can bind.
http://api.jquery.com/keypress/
Also, here is a good walkthrough for making a keypress navigation using jquery:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
EDIT: Important/more relevant lines from the API:
If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the document object. Because of event bubbling, all key presses will make their way up the DOM to the document object unless explicitly stopped.
To determine which character was entered, we can examine the event object that is passed to the handler function. While browsers use differing attributes to store this information, jQuery normalizes the .which attribute so we can reliably use it to retrieve the character code.
Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.
根据 此页面:
event.which
在 IE<9 中未定义在keydown
和keyup
上。对于返回字符的按键,在 Gecko(Seamonkey、Firefox)中,在
keypress
上,event.keyCode
为 0。event.charCode
仅在 Internet Explorer (Mac) 的 keydown 和 keyup 上受支持。在 JSFiddle 上尝试
According to this page:
event.which
is undefined in IE<9 onkeydown
andkeyup
.event.keyCode
is 0 in Gecko (Seamonkey, Firefox) onkeypress
for keys that return a character.event.charCode
is only supported on keydown and keyup by Internet Explorer (Mac).Try it on JSFiddle