通过键盘事件,检测文本框内还能输入多少字,模拟商品评价。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件onkeyup</title>
<style>
.box{
width: 80%;
margin:0 auto;
text-align: center;
font-size: 20px;
color: blue;
}
span{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<p class="text">您还可以输入<span><em id="count">60</em>/60</span>字</p>
<div class="input">
<textarea name="" id="text" cols="60" rows="10"> </textarea>
</div>
</div>
<script>
var total=62;
var counts=document.getElementById("count");
var text=document.getElementById("text");
document.onkeyup=function(){
var len=text.value.length;
var allow=total-len;
counts.innerHTML=allow;
}
</script>
</body>
</html>
结果如下图所示: