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

首先分析下在哪些情况下文本框会产生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. 利用SOLR搭建企业搜索平台 之——solr配置solrconfig.xml

    来源:http://blog.csdn.net/zx13525079024/article/details/25310781 solrconfig.xml配置文件主要定义了SOLR的一些处理规则,包括 ...

  2. windows服务异常值framework版本

    sc query WCService | find /i "state"if %errorlevel% == 0 ( net start "WCService" ...

  3. [POJ2777]Count Color（线段树）

    题目链接:http://poj.org/problem?id=2777 给你一个长为L想线段,向上面染色,颜色不超过30种,一共有O次操作,操作有两种: C a b c 在[a,b]上染上c颜色 P ...

  4. [POJ3061]Subsequence（二分，前缀和）

    题目链接:http://poj.org/problem?id=3061 题意:给一个长为n的数列和整数s,求一个连续的子序列,使得这个子序列长度最短并且不小于这个整数s. 统计[1~i]的子序列和su ...

  5. Spring事务报Connection is read-only

    昨天做项目时,写了个方法,程序突然报了Connection is readonly. Queries leading to data modification are not allowed调了程序半 ...

  6. ArrayList集合的语句示例

    namespace ArrayList集合的语句示例{    class Program    {        static void Main(string[] args)        {    ...

  7. HDU 4324 (拓扑排序) Triangle LOVE

    因为题目说了,两个人之间总有一个人喜欢另一个人,而且不会有两个人互相喜欢.所以只要所给的图中有一个环,那么一定存在一个三元环. 所以用拓扑排序判断一下图中是否有环就行了. #include <c ...

  8. UVa 12206 (字符串哈希) Stammering Aliens

    体验了一把字符串Hash的做法,感觉Hash这种人品算法好神奇. 也许这道题的正解是后缀数组,但Hash做法的优势就是编码复杂度大大降低. #include <cstdio> #inclu ...

  9. HDU 1160 FatMouse's Speed

    半个下午,总算A过去了 毕竟水题 好歹是自己独立思考,debug,然后2A过的 我为人人的dp算法 题意: 为了支持你的观点,你需要从给的数据中找出尽量多的数据,说明老鼠越重速度越慢这一论点 本着“指 ...

  10. 51nod1201 整数划分

    01背包显然超时.然后就是一道神dp了.dp[i][j]表示j个数组成i的方案数.O(nsqrt(n)) #include<cstdio> #include<cstring> ...