textarea change实时监听触发

最新推荐文章于 2024-09-10 15:35:05 发布

吴增漫

最新推荐文章于 2024-09-10 15:35:05 发布

阅读量1.5w

点赞数 3

分类专栏：关于JS

本文链接：https://blog.csdn.net/wuzengman/article/details/84134546

版权

关于JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨了在不同设备上实现文本输入实时监听的挑战，尤其是在移动设备上的兼容性问题。介绍了使用keyup、change、propertychange及input事件的区别和适用场景，最终提供了一种跨平台的解决方案。

摘要由CSDN通过智能技术生成

textarea change实时监听触发

在此次迭代中，留言回复模块中有一个输入字符，计算剩余字数的功能。本不是什么大功能，但是需要兼容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要通过动态绑定来实现。