• 通过正则实时监听检查input输入,实时反应,不符合不能输入的功能详解


    最近做项目,出现一个需求,为了给用户带来更好的体验,在检查input输入值的格式时要做到即时反应,每输入一个字符都要立即检查,如果不符合格式就不能输入

    实现这个需求,首先要做到实时监听input输入值,才能对其进行字符串检查。

    一、实现实时监听input输入值的方法有三个途径

    1、change事件

    这个方法可以监听到input输入内容,不过不是实时监听,只有input失去焦点且文本框内容发生改变才会触发,并且可以用在非输入框中,如:select等。使用方法:

    obj.onchange=function(){
      consolo.log(obj.value);
    }

    2、keydown、keypress、keyup事件

    这是三个都是键盘事件,不过这三个事件还是有一些不同
    (1).当按一下任意键,会触发onkeydown事件,如果不松开,将一直触发。
    (2).当按一下字符键(比如abcd1234这些)会触发onkeypress事件,如果不松开,将一直触发这个事件。
    (3).当释放键盘上的键,才触发onkeyup事件。
    (4).按下一个键盘上的字符键,三种事件的触发顺序keydown -> keypress -> keyup
    (5).按下esc键,在firefox浏览器以及ie浏览器会触发keypress事件,在chrome浏览器和Opera浏览器不会触发keypress(js高级程序设计第三版P379页的说法并不精确)

    使用方法

    obj.onkeypress=function(){
        console.log(obj.value);
    };
    obj.onkeydown=function(){
        console.log(obj.value);
    };
    obj.onkeyup=function(){
        console.log(obj.value);
    }

    实际检测时会发现,keydown事件以及keypress事件会存在延迟,每次获取的输入值,都是之前的,总是慢半拍,原因是keydown与keypress总是在新值发生改变之前触发。
    最后发现只有keyup符合要求,不过keyup也不是完美的,缺点就是当你复制粘贴值进去的时候,或者浏览器自动记住的值输入进去的时候,keyup事件不会触发

    3.input事件

    input事件就可以完美解决这个问题,oninput是在值改变时立即触发,不过他也有小缺点,那就是兼容性问题,它不支持ie9以下的浏览器,不过还好,我们有一个ie专属的事件propertychange()

    这时候,我们就可以采用最佳解决方案:HTML5标准事件oninput和IE专属的事件properchange

    propertychange 和 input 事件:

    1)propertychange只要当前对象的属性发生改变就会触发该事件,功能同oninput,用以替代oninput在IE9以下的不兼容性。

    2)input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会触发该事件,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

    实现代码如下,这里bind同时绑定了input和propertychange两个方法:

    $('#username').bind('input propertychange', function() {  
        console.log($(this).val());
    });  

    二、实现了实时监听input输入值,下一步就是验证格式,实时进行处理

    这里选择用正则表达式和replace()方法去实现,正则表达式可以根据具体需求去写,这里用只限输入数字的例子,实现代码如下:

    $('#username').bind('input propertychange', function() {  
        console.log($(this).val());
        $(this)[0].value = $(this).val().replace(/[^0-9]/g,'')
    });

    至此,完美实现需求,这种交互体验还是很好的,不用每次提交的时候再去给用户弹窗提示格式不正确。
    ---------------------
    参照文章
    原文:https://blog.csdn.net/qq_31881193/article/details/78978167
    原文:https://www.cnblogs.com/LHYwin/p/6136256.html

  • 相关阅读:
    Nginx Rewrite相关功能-ngx_http_rewrite_module模块指令概述
    Linux操作系统安全-加密和安全扫盲篇
    Nginx安全相关配置-自定义Nginx版本信息
    Nginx高级配置-官网logo之favicon.ico
    Linux操作系统的打包/归档工具介绍
    Nginx高级配置-实现多域名HTTPS
    Nginx高级配置-https功能
    Linux操作系统的压缩、解压缩工具介绍
    Nginx高级配置-压缩功能
    Nginx高级配置-自定义json格式日志
  • 原文地址:https://www.cnblogs.com/toggle/p/10721893.html
Copyright © 2020-2023  润新知