美文网首页
textarea change实时监听触发

textarea change实时监听触发

作者: sarry | 来源:发表于2016-10-14 15:52 被阅读9836次

    在此次迭代中,留言回复模块中有一个输入字符,计算剩余字数的功能。本不是什么大功能,但是需要兼容pc和移动。

    留言回复

    是利用keyup(当键盘毽子弹起)事件方法进行计算,做的时候就担心移动,pc是肯定是好用的。不知道移动能不能识别,毕竟它的键盘和真实的键盘有区别。功能做完后,赶快用手机去测试,发现是好用的,暗暗欣喜,就和qa说留言做好了,可以测试了。在qa的专业测试后,说复制粘贴后的内容,剩余字数不变...

    $('#text').keyup(function(){
           var curLength=$(that._els.replay).val().trim().length;
           if(curLength>140)
                {
                    var num=$(that._els.replay).val().trim().substr(0,140);
                    $(that._els.replay).val(num);
                    //alert("超过字数限制,多出的字将被截断!" );
                }
                $("#textCount").text($(that._els.replay).val().trim().length);
            }
     });
    

    因为粘贴的事件并不属于keyup,所以并不能识别。然后就换了一个change事件,可是问题有来了,换成change之后,死活不触发事件。查了一下资料,原来:

    change事件在内容改变(两次内容有可能是相等的)且失去焦点时触发

    代替事件

    propertychange事件实时触发,即每增加一个字符或者删除一个字符就会触发,通过js也会触发(任何属性改变),但是该事件为ie专有
    input是ie之外大多数浏览器支持的事件,在value改变时触发,实时的。然而,通过js改变时,却不会触发

    用jquery实现方法
    $('#text').bind('input propertychange','textarea',function(){
           var curLength=$(that._els.replay).val().trim().length;
           if(curLength>140)
                {
                    var num=$(that._els.replay).val().trim().substr(0,140);
                    $(that._els.replay).val(num);
                    //alert("超过字数限制,多出的字将被截断!" );
                }
                $("#textCount").text($(that._els.replay).val().trim().length);
            }
     });
    

    注意!input和propertychange要通过动态绑定来实现。

    其中还遇到的问题是最开始的时候以为bind后面的input为html的元素,如果是textarea只需要把input换成textarea就可以。不然,此处的input是指jquery里面input事件,不要混淆。指定是input还是textarea需要在绑定的事件之后。

    相关文章

      网友评论

          本文标题:textarea change实时监听触发

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