实现效果：
在输入框内输入文字时，上方文字显示实时可输入的字数
1.jpg
2.jpg
当字数超出限制时，显示实时超出的字数
3.jpg
附上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<p>字数限制在30字内<span id="limit">您还可以输入<b id="count">30</b> 字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script type="text/javascript">
//获取文本域对象、字数变化元素和字数超过限制提示标签
var text=document.getElementById("text"),
count=document.getElementById("count"),
limit=document.getElementById("limit");
//定义一个变量，接收可输入的总字数（30）
var total=30;
//给文本域绑定按键被松开时的事件，后跟匿名函数
text.onkeyup=function(){
//定义变量，用于接收按键每松开一次获取一次文本域的值的长度
var len=text.value.length,
//定义变量，用于接收可输入的字体个数，b标签中的文本内容设置为该变量
allow=total-len;
//判断字数是否超出
if(allow<0){
limit.innerHTML="您已超出"+Math.abs(allow)+"字";
}
else{
limit.innerHTML="您还可以输入"+allow+"字";
}
}
</script>
</body>
</html>
网友评论