When onchange is used in the text box input box, there is an obvious deficiency. The event will not be triggered with the text input, but will be triggered when the text box loses the focus (onblur). That is, there is no instant!
In IE, onpropertychange can be used to replace the onchange event. This event can be triggered immediately when there is any change in the text box.
In this way, the problem is solved.
What about other browsers? onpropertychange is the patent of IE. The next step is the oninput event.
However, oninput has a strange problem. You must use addEventListener to bind the event. Otherwise, the event is invalid.
Okay. The following is a demo. it's okay for mainstream browsers:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> on onpropertychange, oninput event solves onchange event insufficiency by koyoz.com </title> <style type = "text/css"> * {font-size: 14px; font-family: 'comic Sans Ms', Verdana} body {margin-left: 20px} </style> </pead> <body> <p> onchange event: </p> <input type = "text" id = "txt1"/> <p> Use onpropertychange/oninput event: </p> <input type = "text" id = "txt2"/> <p> result: </p> <input type = "text" id = "txt"/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]