在项目中经常会遇到对用户输入的数据进行实时校验，而不是等文本框失去焦点或用户手动点击校验。
首先分析下在哪些情况下文本框会产生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>
时间： 2024-10-11 06:43:35