一、先看效果图
效果如图,当输入文字的时候,提示区域动态的显示已输入的字数和最大输入的字数。非常常用的小功能。
二、知识点
知识点比较简单,为了兼容性好些,我多用了几个事件input、propertychange、paste、keyup。现在好多用vue等框架写,我暂时先用jQuery写了,原因是读者比较好理解,需要其他方式也便于修改,高手估计也不用看这些东西啦哈哈哈。
三、上代码。
我当初学习的时候就希望多看demo,可我找到的资料往往是讲一些要点,写一些代码片段,所以我尽量的直接上代码了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<div id="div1">
<textarea id="text" rows="8" cols="15"></textarea>
<span></span>
</div>
<div id="viewBox">
<!--这里是显示提示的区域-->
</div>
<script type="text/javascript">
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)
})
}
</script>
</body>
</html>