Listening to IME keyboard input events in JavaScript_javascript tips

How should the input method trigger keyboard events? Is the event triggered for every keystroke, or is the event triggered only after the word selection is completed? How can the entire sentence input trigger an event? Different operating systems and different browsers have different views on this. In the worst case, the browser only triggers keydown once after the user uses the input method, and then there are no keyboard events. This is a big problem for the implementation of the Suggestion control, because the Suggestion control needs to monitor changes in the text input box, and events are the most accurate and most computationally efficient method. If polling is used, performance may be affected.
First of all, to monitor keystroke events after enabling the input method, you should use the keydown event. 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 the user inputs using the input method, the keyCode value passed in the keydown event is 229. However, the frequency of triggering keydown is uncertain. In some cases, the event is triggered for every keystroke, and in other cases, the event is triggered only after the word selection is completed. At this time, if we still want to monitor the content changes of the text box in real time, we must use polling.

Copy code The code is as follows:

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 a fun browser It doesn't do anything that others do, and it likes to do things that others don't do. For example, it does not support the de facto standard of keyCode == 229, but uses keyCode == 197 to indicate the use of the input method. Therefore, you need to make some improvements based on the above code. If the Opera browser is detected, change the keyCode constant for comparison.
var imeKey = (UA.Opera == 0) ? 229 : 197;
Finally, there is an even less appreciated browser called Firefox for Mac. It is estimated that the Mac version is too unimportant to Mozilla, so there will be minor problems in the Mac version where many Windows versions have no problems, such as support for the above events. Firefox for Mac does not have keyCode == 229, and only the first keystroke after the input method is enabled will trigger the keydown event, so polling can only be used after a keystroke.
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
After adding these two improvements, real-time monitoring of text box changes is no longer possible The problem occurs even if the user has enabled the input method. The complete code is as follows:

Copy the code The 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 */
}