js怎么计算剩余字数,还可以输入多少字数

发布时间:2020-08-01编辑:脚本学堂
有关js计算剩余字数的方法,计算文本框中可以输入多少字数,checkLength自定义函数得到在textarea中已输入的字符长度。

js怎么计算剩余字数

1、html代码:
 

<textarea name="description" onkeyup="checklength(this);"></textarea>
<br /><small>文字最大长度: 250. 还剩: <span id="chleft">250</span>.</small>
可以看出onkeyup是当用户离开键盘后触发的事件,传递参数是this(当前所在的文档区域)

2、js代码
 

<script type="text/javascript">
function checkLength(which) {
var maxChars = 250;
if (which.value.length > maxChars)
which.value = which.value.substring(0,maxChars);
var curr = maxChars - which.value.length;
document.getElementById("chLeft").innerHTML = curr.toString();
}
</script>

以上函数中,首先给出maxChars变量指定了值(输入区内最多可用的字符数,注意,该变量是个可用于计算的数值)

然后,从参数中得到在textarea中已输入的字符长度,并与前面指定的最大长度做比较。

当输入字符长度超过范围,则使用substring来强制限制其长度,(0,maxChars)为:可输入范围是0个字符到maxChars(变量)个字符。

var curr = maxChars - which.value.length; //算出还可用多少个字符,将数值保存在curr中。

最后,通过getElementById定位到id为chLeft的对象(在该HTML中为span),并将curr中的值通过toString方法把数值变为字符串,反馈到span标签内。