文本框的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事件，如何兼容各大浏览器

推荐阅读