How should input methods trigger keyboard events? Does every keystroke trigger an event, or does it trigger an event when the word is finished? How does the whole sentence input trigger the event? Different operating systems and different browsers have different views on this. In the worst case scenario, the browser triggers only one keydown after the user uses the input method, and then there is no keyboard event. This is a big problem for the implementation of the suggestion control, because the suggestion control needs to listen for changes in the text input box, and events are the most accurate and cost-efficient approach, and performance can be affected if you switch to polling.
First, the KeyDown event should be used to listen for keystroke events after the IME is enabled, which is one of the most informative events because other keyboard events may not be triggered after the input method is enabled. Second, most operating systems and browsers implement the fact that when users use input method input, the KeyDown event passes in a value of keycode of 229. However, the frequency of triggering keydown is indeterminate, and in some cases each keystroke triggers an event, and in some cases only the word is finished before the event is triggered. At this point, if we still want to monitor the contents of the text box in real time, we must use polling.
Copy Code code 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 an interesting browser, other people do things it does not do, other people do not do things it likes to do. For example, it does not support keycode = = 229 of the fact that the standard, but to use keycode = = 197来 to express the use of the input method. Therefore, you need to do some improvement on the basis of the above code, if the monitor is Opera browser, change a KeyCode constant for comparison.
var Imekey = (UA. Opera = = 0)? 229:197;
Finally, there is a more unpopular browser called the Firefox for Mac. It is estimated that the Mac version is too unimportant for Mozilla, so there are small problems with Mac versions where many versions of Windows are fine, such as support for these events. Firefox for Mac does not appear keycode = 229, and only the first keystroke triggers the KeyDown event after the IME is enabled, so you can only use polling after keystrokes.
if (E.keycode = = Imekey | | Ua. Firefox > 0 && UA. OS = ' Macintosh ') {
After these two improvements are added, there is no problem in real-time monitoring the changes in the text box, even if the user has enabled the input method. The complete code is as follows:
Copy Code code 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 */
}
