vue实时显示textarea字数_js 实现textarea输入字数提示

一、先看效果图

效果如图，当输入文字的时候，提示区域动态的显示已输入的字数和最大输入的字数。非常常用的小功能。

二、知识点

知识点比较简单，为了兼容性好些，我多用了几个事件input、propertychange、paste、keyup。现在好多用vue等框架写，我暂时先用jQuery写了，原因是读者比较好理解，需要其他方式也便于修改，高手估计也不用看这些东西啦哈哈哈。

三、上代码。

我当初学习的时候就希望多看demo，可我找到的资料往往是讲一些要点，写一些代码片段，所以我尽量的直接上代码了。

LimitedNnumber("#text", "#viewBox", 9)//调用函数需要传入三个参数，分别为，输入框、显示框、限制的长度(这里是9)

function LimitedNnumber(eventBox, viewBox, textLength) {//调用函数需要传入三个参数，分别为，输入框、显示框、限制的长度

$(document).on('input propertychange paste keyup', eventBox, function(event) {

this.value = this.value.replace(this.value.slice(textLength), "")//超出长度的部分替换为空

$(viewBox).html(this.value.length + "/" + textLength)

})

}