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

首先分析下在哪些情况下文本框会产生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. c# ffmpeg常用参数

    c#  ffmpeg常用参数 转换文件格式的同时抓缩微图: ffmpeg -i "test.avi" -y -f image2 -ss 8 -t 0.001 -s 350x240 ...

  2. Linux之Samba的配置

    Samba的配置   对于linux与windows共享,和平共处,我们可以用Samba软件 Samba是一套免费的开源软件,可以在linux或其他类unix操作系统上实现windows域控制器,文件 ...

  3. 《Linux/Unix系统编程手册》读书笔记6

    <Linux/Unix系统编程手册>读书笔记 目录 第9章 这章主要讲了一堆关于进程的ID.实际用户(组)ID.有效用户(组)ID.保存设置用户(组)ID.文件系统用户(组)ID.和辅助组 ...

  4. SQLite学习手册(内置函数)

    一.聚合函数: SQLite中支持的聚合函数在很多其他的关系型数据库中也同样支持,因此我们这里将只是给出每个聚集函数的简要说明,而不在给出更多的示例了.这里还需要进一步说明的是,对于所有聚合函数而言, ...

  5. AngularJs-ui modal 传参数

    最近开始学习 AnjularJs: 看了两天项目的代码开始动手完成项目中的功能,碰到些问题记录下备忘:方便以后再碰到这样疑惑的coder. 参见 Angular-ui  modal 传递 header ...

  6. python 内建函数 type() 和 isinstance() 介绍

    Python 不支持方法或函数重载, 因此你必须自己保证调用的就是你想要的函数或对象.一个名字里究竟保存的是什么?相当多,尤其是这是一个类型的名字时.确认接收到的类型对象的身份有很多时候都是很有用的. ...

  7. 自动化测试LoadRunner

    这个地址应该比较的好下载,以前找的地址都是需要输入一些相关的信息.这个只需要有一个HP的注册账号就可下载,记下来.以备后用: 下载地址: http://www8.hp.com/us/en/softwa ...

  8. HDU 1941 Hide and Seek（离散化+树状数组）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1941 题意:给出平面上n个点,找出一点p,使得距离p最近和最远的点的距离之差最小.输出这 ...

  9. 漫游Kafka实战篇之搭建Kafka运行环境

    接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...

  10. 在页面中使用js

    JavaScript:用来在页面编写特效的,和HTML\CSS一样当都是由浏览器解析 JavaScript语言 一.JS如何运行(JavaScript,jscript,VbScript,applet ...