最近做的一些项目,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下。

        ==================================================================

        即时搜索的方案:

        (1)change事件    饿。。。。。   触发事件必须满足两个条件:

            a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
            b)当前对象失去焦点(onblur)
 

        (2)keypress  恩,还好。。。。。就是能监听键盘事件,鼠标复制黏贴操作他就无能为力的赶脚了。。。。。

        (3)propertychange(ie)和input事件

           +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

            input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标

            黏贴的改变都能及时监听到变化

            propertychange,只要当前对象属性发生改变。(IE专属的)

            感觉找到了真爱。。。。。但是

            ======

              oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG,

              那就是通过右键菜单菜单中的 剪切 和 删除 命令删除内容的时候不会触发,

              而 IE 其他版本都是正常的,目前还没有很好的解决方案。

            =======

            不过 input & propertychange 仍然是即时搜索比较好的方案

        ==========================================================================

        实践了一下

        //格式化显示卡号

        var cnAdvanceChangeHandle = function(e){

          var value = $(this).val();
            $(this).val(format(value, 4, 19));

        };

        //格式化显示卡号,ie处理

        function changeHandle(target, value){

          $(target).val(value);

        }

        //step参数是设置卡号每隔几个数字空一格,contrLen是设置只能输入的字符个数

        var cardNoChangeHandle = function(step, contrLen){

          //中间变量,保存input的值和当前值比较,不相同才要进行格式化处理

          //避免内存溢出异常

          var tempValue;

          return function(e){

            var value = $(this).val();

            if(value != tempValue){

              value = format(value, step, contrLen);

              tempValue = value;

              changeHandle(this, value);

            }

          };

        };

        var cnHandle = cnChangeHandle(4, 19);

        //判断浏览器版本,是ie6,7,8

        !$.support.leadingWhitespace && $(".card-no").bind("propertychange", cnHandle );

        //其他高级浏览器

        $(document).delegate(".card-no", "input", cnAdvanceChangeHandle);

        

        eg:

        

总结一下 input propertychange的更多相关文章

  1. 巧用 即刻搜索事件 input propertychange 监听输入框字数

    实时监听输入框的字数,大于200时,不再输入. 即时搜索: propertychange(ie)和input事件(常用) input是标准的浏览器事件,一般应用于input元素,当input的valu ...

  2. input propertyChange

    結合 HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化. oninput 是 HTML5 的標準事件,對於檢測 textarea, i ...

  3. input propertychange(1)

    input type=“text” 通过js改变输入框的value值是不会出发input propertychange事件

  4. 'input propertychange' 当输入框文字改变时触发的事件!

    $('.amount_input').bind('input propertychange', function() { console.log(2); $('.list label').remove ...

  5. 即时反应的input和propertychange方法

    在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...

  6. input实时监听(input oninput propertychange onpropertychange)

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  7. input 输入框 propertychange

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  8. input事件在进行模糊搜索时,用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  9. 使input文本框随其中内容而变化长度的方法

    最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...

随机推荐

  1. Android使用AudioTrack发送红外信号

    最近要做一个项目,利用手机的耳机口输出红外信号,从而把手机变成红外遥控器,信号处理的知识基本都还给老师了,刚开始真的挺头疼.找了不少资料研究了一下,总算有点心得,在这里做个备忘. 一.音频信号输出原理 ...

  2. HDU1532 网络流:最大流之福德福克森算法

    问题描述:约翰是个农民,每次下雨的时候他的庄家总是会被淹没,这就意味着当庄家被水淹后需要很长时间才能重新生长出来,因此,约翰已经建立了一系列排水管道为了使他的庄家尽可能被淹没的最少,也就是说管道的排水 ...

  3. c# CLI托管工程开启调试c++库工程代码

    启动调试c#winform工程中,无法命中c++库工程中中的断点,在c#工程中更改调试设置: 勾选上Enable unmanaged code debuging

  4. JavaScript数据类型之隐式类型转换

    JavaScript的数据类型分为七种,分别为null,undefined,boolean,string,number,object,symbol ( ECMAScript 2015新增).objec ...

  5. JSON.stringify 在OA差旅中转换为字符串传给后端,(使用from表单的形式)

    $('#bookForm').find('#formData').val(transInfo.fromData).end().submit(); 这里的val()中的transInfo.fromDat ...

  6. build配置

     buildTypes {         debug {             // 显示Log             buildConfigField "boolean", ...

  7. GridView_RowCommand事件中取得GridViewRow

    GridViewRow row = ((Control)e.CommandSource).BindingContainer as GridViewRow;

  8. Codis集群

    一.简介 Codis是一个分布式的Redis解决方案,对于上层的应用来说,连接Codis Proxy和连接原生的Redis Server没有明显的区别(不支持的命令列表),上层应用可以像使用单机的Re ...

  9. Head First 设计模式之适配器模式与外观模式

    Head First设计模式之适配器模式与外观模式 前言: 之前讲过装饰者模式,将对象包装起来并赋予新的职责,这一章我们也会将对象进行包装,只不过是让它们看起来不像自己而像是别的东西.这样就可以在设计 ...

  10. Validation failed for one or more entities.

    验证失败后用DbEntityValidationException 查找出错的字段 try { // Your code... // Could also be before try if you k ...