用js有兩種寫法：
法一：
<!DOCTYPE HTMl> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="msg"></div> <input id='txt' value="" /> <input id='btn' value="點我" type="button" onclick="ff()" /> <script> //當狀態改變的時候執行的函數 function handle() { document.getElementById('msg').innerHTML = "輸入的文字為：" + document.getElementById('txt').value; } if(/msie/i.test(navigator.userAgent)) { //ie瀏覽器 console.log("ie瀏覽器") //document.getElementById('txt').onpropertychange = handle; document.getElementById('txt').attachEvent("onpropertychange", handle); } else {//非ie瀏覽器，比如Firefox console.log("非ie瀏覽器") document.getElementById('txt').addEventListener("input", handle, false); //document.getElementById('txt').watch('a', fn); } function ff() { document.getElementById('txt').value=Math.random(); } </script> </body> </html>
法一的缺點顯而易見，需要判斷瀏覽器的版本，貌似ie11之后是支持
addEventListener，但是，ie11卻不能通過
/msie/i.test(navigator.userAgent)去判斷，原因是因為userAgent中不包括msie字符串了。
附個版本瀏覽器的userAgent：
ie11:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; rv:11.0) like Gecko
ie10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
ie9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
ie8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)
ie7:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
ie6:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
chrome:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.146 Safari/537.36
firefox:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
法二：
法二是對法一思想上的升級，不需要通過檢測瀏覽器，而是檢測Web 瀏覽器所支持功能的方法存在，即直接檢測對功能的支持：
<!DOCTYPE HTMl> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="msg"></div> <input id='txt' value="" /> <input id='btn' value="點我" type="button" onclick="ff()" /> <script> //當狀態改變的時候執行的函數 function handle() { document.getElementById('msg').innerHTML = "輸入的文字為：" + document.getElementById('txt').value; } function registerEvent(sTargetID, sEventName, fnHandler) { var oTarget = document.getElementById(sTargetID); if (oTarget != null) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventName, fnHandler, false); } else { var sOnEvent = "on" + sEventName; if (oTarget.attachEvent) { oTarget.attachEvent(sOnEvent, fnHandler); } } } } registerEvent('txt',"input",handle); </script> </body> </html>
法二可以用在很多瀏覽器兼容的事件添加上，但是有個問題，比如input是html5新增加的事件，對於一些不支持html5的老ie版本，可能會有問題
法三：
使用jquery實現
使用 jQuery 庫的話，只需要同時綁定 oninput 和 onpropertychange 兩個事件就可以了，示例代碼如下：
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});