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

首先分析下在哪些情况下文本框会产生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. vb.net 写入文件同步锁

    <SoapHeader("oHeader")> _ <WebMethod()> _ <ScriptMethod(ResponseFormat:=Res ...

  2. Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一)

    相关的maven的 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...

  3. Datagridview的某些属性again

    private void button1_Click(object sender, EventArgs e) //这里是不用泛型集合的情况,用的是Datatable { SqlConnection c ...

  4. c#中获取服务器IP，客户端IP以及Request.ServerVariables详细说明

    客户端ip: Request.ServerVariables.Get("Remote_Addr").ToString();  客户端主机名: Request.ServerVaria ...

  5. 51nod 博弈论水题

    51nod1069 Nim游戏 有N堆石子.A B两个人轮流拿,A先拿.每次只能从一堆中取若干个,可将一堆全取走,但不可不取,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误 ...

  6. highCharts入门-强大的图表库插件

    简介         Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...

  7. hadoop DataNode实现分析

    在前面说hadoop整体实现的时候, 说过DataNode的需要完成的首要任务是K-V存储.                                            第二个功能是 完成和 ...

  8. php多种实例理解无限极分类

  9. python练习程序（c100经典例8）

    题目: 输出9*9口诀. for i in range(1,10): for j in range(1,i+1): print str(j)+"*"+str(i)+"=& ...

  10. Android下实现tab页个人比较推崇的方法

    使用fragment实现tab页的效果: 三个页面是单独的三个Fragment 主Activity的实现: package com.hsx.tab; import android.os.Bundle; ...