Original post address: http://www.cnblogs.com/cathsfz/archive/2011/05/29/2062382.html
It is easy to listen to users' keyboard input in Javascript, but once a user uses the input method, the problem becomes complicated. How should I trigger a keyboard event using the input method? Is an event triggered every time a key is hit, or is the event triggered only after the word selection is completed? How can I trigger the entire sentence? Different operating systems and different browsers have different opinions on this. In the worst case, the browser only triggers the input method once.keydown
Then there will be no keyboard events. This is a big problem for the implementation of the suggestion control, because the suggestion control needs to listen to changes in the text input box, and the event is the most accurate and saves the most computing resources, if it is changed to round-robin, the performance may be affected.
First, you must listen to the use ofkeydown
This is the most informative event, because other Keyboard Events may not be triggered after the input method is enabled. Secondly, most operating systems and browsers have implemented a de facto standard, that is, when users use input methods,keydown
Event passed inkeyCode
The value is229
. Triggerkeydown
The frequency is uncertain. In some cases, events are triggered every time you press the key. In some cases, events are triggered only after the word selection is completed. At this time, if we still need to monitor the content changes in the text box in real time, we must use round robin.
var timer;
var imeKey = 229;
function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey) {
timer = setInterval(checkTextValue, 50);
} else {
checkTextValue();
}
}
function checkTextValue() {
/* handle input text change */
}
Opera is an interesting browser. Others do nothing, and others do nothing. For example, it does not supportkeyCode == 229
This fact standard must be usedkeyCode == 197
To indicate the use of the input method. Therefore, you need to make some improvements on the basis of the above Code. If it is detected that it is an Opera browser, you need to change the keycode constant for comparison.
var imeKey = (UA.Opera == 0) ? 229 : 197;
Finally, there is a more undesirable browser called Firefox for Mac. It is estimated that the Mac version is too unimportant for Mozilla. Therefore, in many Windows versions, there may be minor issues in Mac versions, such as support for the above events. Firefox for Mac will not appearkeyCode == 229
And only the first key is triggered after the input method is enabled.keydown
Event, so you can only use round robin after the key is hit.
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
After these two improvements are added, the changes in the real-time monitoring text box are okay even if the user enables the input method. The complete code is as follows:
var timer;
var imeKey = (UA.Opera == 0) ? 229 : 197;
function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
timer = setInterval(checkTextValue, 50);
} else {
checkTextValue();
}
}
function checkTextValue() {
/* handle input text change */
}