虚拟键盘中的颜色字段 [英] Color fields in virtual Keyboard

问题描述

大家好！我正在开展一个项目，就像那样。所以我通过使用div标签制作了虚拟键盘，我希望用户按下的每个键都在虚拟KB中高亮显示。我已经尝试了几天在div标签中使用onkeypress事件的想法，所以当按下一个键来进行JS验证以查看highlite的哪个键。我已经结束了这个解决方案，因为我尝试了一切，但它不起作用。我真的很感激，如果有人可以给我另一个想法。

提前谢谢！

Hello to everybody! i am working on a project, which is going to be something like that. So i've made the virtual keyboard by using div tags and i want every key the user is pressing to be highlited in the virtualKB. I've tried for some days working in the idea to have onkeypress event in the div tags, so when a key is pressed to make JS validation to see which key to highlite. I've come to an end with that solution cause i tried everything but its not working. I would be really appreciated if anybody could give me an alternative idea about that.
Thanks in advance!

推荐答案

不要使用 onkeypress 事件（这就是它真正被调用的方式），使用 onkeydown （突出显示）和 onkeyup （停止突出显示）。

将所有键放在某个元素中并使用DOM导航查找每个键，以避免为所有键提供唯一ID这样繁琐的事情。一个很好的方法是使用jQuery，以及添加事件处理和编写处理程序。请参阅：

http://api.jquery.com/children/ [ ^ ]，

http://api.jquery.com/each/ [ ^ ]，

http：//api.jquery。 com / keydown / [ ^ ]，

http://api.jquery.com/keyup/ [ ^ ]。



要突出显示，请使用两个不同的CSS样式并在 onkeydown / onkeyup上来回切换事件：

http://api.jquery.com/addClass/ [ ^ ]

http://api.jquery.com/removeClass/ [ ^ ]，

http://api.jquery.com/toggleClass/ [ ^ ]，

http://api.jquery.com / category / css / [ ^ ]。



如果您需要学习jQuery（强烈推荐），请参阅：

http://en.wikipedia.org/wiki/JQuery [ ^ ]，

http://jquery.com [ ^ ]，

http://learn.jquery.com [ ^ ]，

http://learn.jquery.com/using-jquery-core [ ^ ]，

http://learn.jquery.com/about-jquery/how-jquery-works [ ^ ]（开始从这里开始）。

-SA

Don't use onkeypress event (this is how it is really called), use onkeydown (to highlight) and onkeyup (to stop highlighting).
Put all the keys in some element and find each key using DOM navigation, to avoid such a tedious thing as giving unique IDs to all keys. One good way to do it, as well as adding event handling and writing the handlers themselves, is using jQuery. Please see:
http://api.jquery.com/children/[^],
http://api.jquery.com/each/[^],
http://api.jquery.com/keydown/[^],
http://api.jquery.com/keyup/[^].

For highlighting, use two different CSS styles and toggle them back and forth on onkeydown/onkeyup events:
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^],
http://api.jquery.com/category/css/[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).

—SA

这篇关于虚拟键盘中的颜色字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！