美文网首页
input实时监听输入

input实时监听输入

作者: 林小刀2_0 | 来源:发表于2017-08-31 00:20 被阅读0次

    input根据实时输入的值进行内容检索是常见的业务场景,但使用change,或者keypress等事件绑定在遇到复制粘贴的时候则不会触发事件的发生,无法做到实时监听。解决的方法就是同时使用input propertychange事件进行绑定。例:

        $('input').on('input propertychange',function(){
    });
    

    但该方法有一个问题,就是当我们使用中文输入的时候,比如我要打一个”好“字,在我敲键盘‘H’键的时候,事件就已经触发了,而我们需要的是,但我完整地敲完‘hao’之后,选择了”好“字,之后才触发事件执行。这里提供个人的一个思路,就是在事件触发之后,对输入值进行中文验证,如果为true,说明我已经输入了一个完整的中文字符,也就是可以进行检索(其他程序)了。

        $('input').on('input propertychange',function(){
             var $this_val = $(this).val();  
                var re = /^[\u4e00-\u9fa5]+$/;  //中文的正则表达式
                if(re.test($this_val)){
                    ...
                }
    });
    

    另外,该方法也有一种情况下不会被触发,那就是动态的给input赋值。如:

          $('input').val('好好学习,天天向上');
    

    页面上可以看到input的值变化为‘好好学习,天天向上’,但事件并没有被触发执行。

    相关文章

      网友评论

          本文标题:input实时监听输入

          本文链接:https://www.haomeiwen.com/subject/crsfjxtx.html