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

首先分析下在哪些情况下文本框会产生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. [Topcoder]AvoidRoads（dp，hash）

    题目连接:https://community.topcoder.com/stat?c=problem_statement&pm=1889&rd=4709 题意:给一张n*m的地图,上面 ...

  2. [LightOJ1004]Monkey Banana Problem（dp）

    题目链接:http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1004 题意:数塔的变形,上面一个下面一个,看清楚 ...

  3. class JOIN

    class JOIN :public Sql_alloc { JOIN(const JOIN &rhs); /**< not implemented */ JOIN& opera ...

  4. 打印机C++

    m_prnDC.SetMapMode(MM_LOMETRIC);  m_iPrnX = m_prnDC.GetDeviceCaps(HORZRES);m_iPrnY = m_prnDC.GetDevi ...

  5. Jquery源码中的Javascript基础知识（四）— jQuery.fn.init方法

    $() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...

  6. 一、HTML4背景知识

    前言 本教程针对已经基本熟悉HTML4基本标签的人. HTML的发展历程 HTML 1.0: 1993年6月由IETF(Internet Engineering Task Force, 互联网工程工作 ...

  7. POJ 3422 Kaka's Matrix Travels (K取方格数：最大费用流)

    题意 给出一个n*n大小的矩阵,要求从左上角走到右下角,每次只能向下走或者向右走并取数,某位置取过数之后就只为数值0,现在求解从左上角到右下角走K次的最大值. 思路 经典的费用流模型:K取方格数. 构 ...

  8. HDU 5327 Olympiad （水题）

    题意:beautiful数字定义为该数字中的十进制形式每一位都不同,给一个区间[L,R],求该区间中有多少个beautiful数字. 思路:数字不大,直接暴力预处理,再统计区间[1,i]有多少个,用c ...

  9. (六) 6.2 Neurons Networks Backpropagation Algorithm

    今天得主题是BP算法.大规模的神经网络可以使用batch gradient descent算法求解,也可以使用 stochastic gradient descent 算法,求解的关键问题在于求得每层 ...

  10. 中小型数据库 RMAN CATALOG 备份恢复方案(二)

    中小型数据库呈现的是数据库并发少,数据库容量小,版本功能受限以及N多单实例等特点.尽管如此,数据库的损失程度也会存在零丢失的情形.企业不愿意花太多的钱又要保证数据库的可靠稳定,可是苦煞了我这些搞DB的 ...