input实时监听输入

2017-08-31  本文已影响0人  林小刀2_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的值变化为‘好好学习,天天向上’,但事件并没有被触发执行。

上一篇下一篇

猜你喜欢

热点阅读