In the past two days, we have done a function that requires real-time monitoring of text box input, and we have encountered the nausea problem that the Chinese input method cannot trigger the onkeyup event.
The specific manifestation is as follows:
When listening for an input keyup event, the English input method can detect the change in the text box value through the keyup event in real time. However, when the input method becomes Chinese, the input keyup event will not be triggered normally. This is the previous way of writing.
<html><head><script type="text/javascript" src="//www.VeVB.COM/static/js/jquery-1.4.2.min.js"></script></head><body> <p> Use keyup events to detect text box content: </p> <p> <input type="text" name="keyup_i" id="keyup_i" autocomplete="off"/> <span id="keyup_s"></span> <script type="text/javascript"> $('#keyup_i').bind('keyup', function(){ $('#keyup_s').text($(this).val()); }) </script> </p></body></html>As you can see, this writing encounters the problem that Chinese cannot trigger the keyup event. So I looked for a solution. I remembered that the search bar prompt in baidu seemed to have no problem, so I started to look at Baidu's js. Baidu's js is ugly... The method is named as a letter, and finally I found that it was probably using timeout as a timer to monitor the modification of the input box regularly. Not very satisfied with this method. So I continued to look for a better solution, so I found two events: oninput and onpropertychange.
Oninput is available under firefox, while onpropertychange is available under ie. There are some differences between the two methods.
Oninput can only detect changes in the property value, while onpropertychange can detect changes in all properties containing the value. So it started to change to this.
<html><head><script type="text/javascript" src="//www.VeVB.COM/static/js/jquery-1.4.2.min.js"></script></head><body> <p> Use oninput and onpropertychange events to detect text box content: </p> <p> <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/> <span id="inputorp_s"></span> <script type="text/javascript"> //First determine whether the browser is a vicious IE. There is no way to write something like IE. var bind_name = 'input'; if (navigator.userAgent.indexOf("MSIE") != -1){ bind_name = 'propertychange'; } $('#inputorp_i').bind(bind_name, function(){ $('#inputorp_s').text($(this).val()); }) </script> </p></body></html>The problem has been solved so.