在项目中经常会遇到对用户输入的数据进行实时校验，而不是等文本框失去焦点或用户手动点击校验。

首先分析下在哪些情况下文本框会产生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事件，如何兼容各大浏览器的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  3. 关于下拉框的onchange事件和onclick选择value值。

    下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器. 下面是代码: <!DOCTYPE html><html la ...

  4. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  5. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  6. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  7. IE浏览器的脚本文本框监听事件

    一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...

  8. js监听用户的键盘敲击事件，兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  9. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

随机推荐

  1. HDU 4662 MU Puzzle 简单找规律

    没有任何变换(III变U和删UU操作)之前,I 的个数一定是2^x个(也就是2的整数次幂) 若仅考虑III变U,那么设U的个数为k,I 的个数变为2^x-3*k 再加上删除UU操作,假设我们删除了2* ...

  2. jdbc框架 commons-dbutils的使用

    commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序 ...

  3. 两个学生OJ差集

    这个程序非常简单,因为用了最笨的办法,不过运行一点儿也不慢... 在我们学校OJ平台每个人的个人信息中都有Solved Problems List,我们可以用这个简单的程序输入两个人解决问题的所有题号 ...

  4. js与flash结合使用

    最近,做个了一个falsh和js 通信的小东西. flash负责接收参数和返回结果.js负责处理信息,接收返回结果,将结果返回到服务器端. 听着很复杂,做起来页面还是很简单的.用的技术还是不少的,fl ...

  5. 关于在c#中引用外部dll文件，在页面中找不到命名空间

    最近在项目中碰到这样的问题,经过搜索,发现是vs2010的版本不对,VS默认的版本是.NET Framework 4 Client Profile,需要将他更改为.NET Framework 4 版本 ...

  6. JSON 之 SuperObject(9): TSuperType

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  7. R语言iris数据集的层次聚类

    data=iris[,-5]dist.e=dist(data,method='euclidean')model1=hclust(dist.e,method='ward') #分3类result=cut ...

  8. HDU 1494 跑跑卡丁车

    很无爱的一道题. 题解都看得一知半解的. acm之家的题解,留着以后慢慢体会: 把这题转化为背包模型,每个%20能量算一个单位,最多有15个,如果大于5个有一个加速卡,如果大于10个有2个加速卡,如果 ...

  9. ecshop lib包含lib文件

    在lbi文件中增加lbi方法 方法1. {include file='library/name.lbi '} 方法2. <?php echo $this->fetch('library/n ...

  10. HDU 2026 首字母变大写

    #include<cstdio> #include<cstring> #include<algorithm> using namespace std; int ma ...