在項目中經常會遇到對用戶輸入的數據進行實時校驗，而不是等文本框失去焦點或用戶手動點擊校驗。
首先分析下在哪些情況下文本框會產生change事件。
1、用戶通過鍵盤入正常字符時；
2、用戶通過鍵盤輸入非正常字符時 ctrl+v ctrl+x ctrl+z delete Backspace 等操作時；
3、用戶通過鼠標進行粘貼、剪切、撤消等操作時；
<body> <input id="text1" type="text"/> <div id="info1"></div> <script type="text/javascript"> var text1 = $("#text1");
//input基本滿足，但不能完全支持IE text1.bind("input", function () { console.clear(); console.log("input", $(this).val()); });
//有input就夠了，propertychange好像沒什么效果 text1.bind("propertychange", function () { console.clear(); console.log("propertychange",$(this).val()); });
//只能捕獲鍵盤事件
text1.bind("keyup", function () {
console.clear();
console.log("keypress", $(this).val());
});
</script> </body>
現在針對<input>文本框的onchange相關的事件，主要有以下幾個事件，分析他們對以上情況是否能捕獲
onchange：文本框好像沒有該事件，只有下拉框才有。
不足：不支持文本框
oninput：文本框值改變時觸發，以上三種情況都滿足。
不足：但是在IE9及以下時，只有捕獲輸入可見字符，但在文本框中進行delete Backspace ctrl+x等操作時無法進行捕獲；
onpropertychange：
onkeypress：在文本框中按下鍵盤的事件，細分可分為onkeydown和onkeyup事件。
不足：這個好像是否捕獲用戶輸入的事件，但用戶如果通過鼠標右擊粘貼，則無法捕獲。
以下是針對IE不能正常捕獲change事件，作出的監聽方法。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>test</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script type="text/javascript"> //文本框change事件。 //兼容IE9 chrome、firefox //解決IE9下 按delete、Backspace、ctrl+x 改變文本內容時不能觸發change事件 function test() { $("#li1").select().focus(); } //輸出值 function check(p_obj) { console.log($(p_obj).val()); } $(function () { if ($.browser.msie) { var flag = true; $("#text1").keydown(function (event) { if ($(this).val() == "") { flag = false; } else { flag = true; } }); $("#text1").keyup(function (event) { var keycode = event.which; //解決IE兼容 監聽ctrl+x ctrl+y ctrl+z 事件對文本值的改變 強制check if (event.ctrlKey && (keycode == 88 || keycode == 89 || keycode == 90)) { check($(this)[0]); return; } //解決IE兼容 臨聽 delete backspace對文本框刪除操作 強制check if ((keycode == 8 || keycode == 46 || keycode == 46) && flag) { check($(this)[0]); } }); //禁用文本框的右鍵，防止用戶通鼠標右擊菜單進行粘貼、剪切操作 $("#text1").bind("contextmenu", function (e) { return false; }); } }); </script> </head> <body> <input id="text1" oninput="check(this)"/> </body> </html>