使用jQuery触发按键...并指定按下了哪个键 [英] Trigger a keypress with jQuery...and specify which key was pressed

问题描述

我想要一个输入元素（type = text）或textarea元素，通过触发特定的击键动态验证。这将用于中文拼音输入，例如：

I would like to have an input element (type=text) or textarea element that validates dynamically by triggering specific keystrokes. This will be used for Chinese pinyin input, so for example:

用户在输入元素中键入ma2。 keydown事件触发每次击键，2永远不会出现。相反，当用户按下2时，a将收到音调标记，如下所示：á。最后，用户将输入：má。

The user types "ma2" into an input element. The keydown event triggers for every keystroke, and the 2 never appears. Instead, when the user presses "2" the "a" will receive a tone mark, like this: "á". In the end, the user will have typed: "má".

这可以通过使用$（element）.val（）读取和更改整个输入值来实现。但是，当输入元素具有焦点并且通过调用.val（something）设置其值时，光标移动到文本的末尾。这在大多数情况下都可以正常工作，因为用户只是在字段的末尾继续输入，但我希望这可以在所有情况下工作。

This can be accomplished by reading and changing the entire input value using $(element).val() however, when an input element has focus and it's value is set by calling .val("something"), the cursor moves to the end of the text. This works fine in most situations because a user just continues typing at the end of the field, but I want this to work in all situations.

...此问题的另一个解决方案是获取/设置输入或textarea元素中光标的位置。我不认为这在javascript中是可行的，但是。

...another solution to this problem would be to get/set the location of a cursor within an input or textarea element. I don't think this is possible in javascript, however.

所以，Remy肯定是在正确的轨道上。触发按键不允许我输入特殊字符而不会有很多麻烦。相反，我捕获keydown事件并设置输入/ textarea的值，然后移动插入符。

So, Remy was on the right track for sure. Triggering keypresses wouldn't allow me to input special characters without a lot of hassle anyways. Instead, I catch the keydown event and set the value of the input/textarea, and then move the caret.

我没有找到任何有益于插入/设置的东西在jQuery，但以下真的打破了我的问题。当它稳定时，我会发布一个指向我最终拼音输入代码的链接。它现在非常接近。

I haven't found anything good for caret getting/setting in jQuery, but the following really broke that problem down for me. I'll post a link to my final pinyin input code when it's stable. It's pretty close now.

http： //blog.vishalon.net/Post/57.aspx
http：/ /demo.vishalon.net/getset.htm

推荐答案

你可能没有太多运气触发按键 - 我我相当确定，除非keypress是可信的（即来自浏览器），否则它不会被接收。

You may not have much luck triggering keypress - I'm fairly sure that unless the keypress is trusted (i.e. originates from the browser), it won't be picked up.

但是，你可以进行文本替换并插入克拉回原处 - 而不是将它射到弦的末端。你需要使用setSelectionRange和createTextRange（对于IE）。

However, you can do text replacement and insert the carat back where it was - instead of shooting it to the end of the string. You need to use setSelectionRange and createTextRange (for IE).

我已经整理了一个小小的演示 - 你看到的替代品与真实的单词不匹配，但是它显示了它的工作原理：

I've put together a little demo - the replacements you'll see don't match real words, but it shows how it works:

http://jsbin.com / emudi / （编辑源 http://jsbin.com/emudi/edit ）

诀窍是要记下克拉的位置，用substr替换找到的单词（而不是正则表达式以避免替换错误的匹配）然后重新放置新单词末尾的克拉。

The trick is to take note of where the carat is, replace the found word using substr (rather than regex to avoid replacing the wrong matches) and then re-placing the carat at the end of the new word.

替换是在太空按下时触发或模糊离开。关于此的说明 - 您可以触发特定字符（即'2'）的替换 - 但我不建议在每个按键上搜索替换。

The replacement is triggered on the space press or blurring the away. A note on this - you could trigger the replacement on a specific character (i.e. the '2') - but I wouldn't recommend searching for replacements on every keypress.

这篇关于使用jQuery触发按键...并指定按下了哪个键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！