首页 > 代码库 > 文本框的onchange事件，如何兼容各大浏览器
文本框的onchange事件，如何兼容各大浏览器
在项目中经常会遇到对用户输入的数据进行实时校验，而不是等文本框失去焦点或用户手动点击校验。
首先分析下在哪些情况下文本框会产生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>
文本框的onchange事件，如何兼容各大浏览器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。