大家在一些软件和网页常常会看到的一个功能,就是输入框字数达到上限后,不能继续输入
当输入字数达到上限之后,可以看到文本框属于被锁定的状态
那么这样的功能该怎么实现呢?我们可以从两种方式来写
JS
这里我们做了一个if判断,来判定剩余字数
<body>
<textarea cols="30" rows="10"></textarea>
<span></span>
<script>
var ta=document.querySelector("textarea");
var span =document.querySelector('span');
ta.onkeydown =function(){
length=40-ta.value.length;
span.innerHTML="你还可以输入"+length+"个字符"
if(length==0){//如果剩余可输入的字数为零,则文本框锁定
ta.disabled=true;
}
}
</script>
</body>
还有一种更简单的方式,就是直接从HTML的代码进行修改,在文本框的标签下,加入一个maxlength
<body>
<textarea cols="30" rows="10" maxlength="40"></textarea>
<span></span>
<script>
var ta=document.querySelector("textarea");
var span =document.querySelector('span');
ta.onkeydown =function(){
length=40-ta.value.length;
span.innerHTML="你还可以输入"+length+"个字符"
// if(length==0){//如果剩余可输入的字数为零,则文本框锁定
// ta.disabled=true;
// }
}
</script>
</body>
两种方法中,我任务是第二种方法更好,代码简洁,而且第一种文本框锁定后,不能删除原本的字
比较鸡肋