OnChange has a noticeable disadvantage when it comes to text box input boxes. The event does not fire with the input of the text, but only when the text box loses focus (onblur). That is, no instant sex!
Under IE, you can use onpropertychange to replace the onchange event, which can be triggered immediately when there is any change in the text box.
The problem is solved.
What about other browsers, Onpropertychange is the patent of IE. Then there is the Oninput incident.
But Oninput has an uncanny need to bind the event in a addeventlistener way. otherwise invalid.
OK, here is the demo example, the main browsers are OK:
<! 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 resolves onchange events with Onpropertychange,oninput events 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> using onchange event: </p> <input type= "text" id= "txt1"/> <p> use Onproper Tychange/oninput event: </p> <input type= "text" id= "txt2"/> <p> result:</p> <input type= "text" id= "t XT "/> <script type=" Text/javascript "> var $ = function (o) {return document.getElementById (o)}; $ (' txt1 '). onchange = function () {$ (' txt '). Value = This.value; } $ (' Txt2 '). Onpropertychange = function () {$ (' txt '). Value = This.value; } if (window.AddEventListener) {$ (' txt2 '). AddEventListener (' input ', function () {$ (' txt '). Value = This.value}, False); } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]