Listening to IME keyboard input events in JavaScript _ javascript skills

Source: Internet
Author: User
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, after the user uses the input method, the browser only triggers the keydown once, and no keyboard event is triggered. 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 need to listen to the keydown event after enabling the input method. 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 the input method, the keyCode passed in by the keydown event is set to 229. However, the frequency of triggering keydown is uncertain. In some cases, each key trigger event, and in some cases, the event is triggered only after the word selection is complete. At this time, if we still need to monitor the content changes in the text box in real time, we must use round robin.

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 an interesting browser. Others do nothing, and others do nothing. For example, it does not support the fact standard keyCode = 229, but uses keyCode = 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 does not show keyCode = 229, and after the input method is enabled, only the first key is used to trigger the keydown event. Therefore, you can only use round robin after the key.
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:

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 */
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.