abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>12.textarea文本域字数限制(2)</title> <style type="text/css"> .box{ width: 600px; h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12.textarea文本域字数限制(2)</title>
<style type="text/css">
.box{
width: 600px;
height: 160px;
border: 10px solid pink;
border-radius: 10px;
margin: 0 auto;
padding: 10px;
}
.box1{
float: right;
width: 150px;
height: 24px;
text-align: center;
font-size: 14px;
color: #888;
}
.box1 span{
font-size: 16px;
font-weight: bold;
}
#text{
width: 600px;
height: 100px;
border: 1px solid #888;
margin-top: 5px;
}
#btn{
float: right;
border: 0;
border-radius: 4px;
width: 60px;
height: 28px;
line-height: 28px;
background: lightblue;
}
#btn:hover{
background: pink;
outline: none;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">还可以输入<span id="number"></span>字</div>
<textarea id="text" placeholder="请输入您的评论..."></textarea>
<button type="button" id="btn">发布</button>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById('text'); // 获取textarea元素
var number = document.getElementById('number'); // 获取span元素
var btn = document.getElementById('btn'); //获取button元素
var m ; //定义一个空变量
// 当文本域键入字体的时候执行函数
text.onkeyup = function kp(){
m = 80 - text.value.length; // 获取到文本域的字符长度减去规定80的长度
if(m<0){
number.style.color = 'red'; //文本域的字符串数量小于0的时候显示为红色
}else{
number.style.color = '#888'; // 否则灰色
}
number.innerHTML = m; //把剩余数量显示出来
}
//点击发布按钮时执行的函数
btn.onclick = function(){
//判断是否有内容写入与是否超出限制的长度
if(m==80){
alert('请填写评论');
text.focus();
}else if(m<0){
alert('超出限制');
text.focus();
}else{
alert('发布成功');
}
}
}
</script>
Correcting teacher：天蓬老师Correction time：2019-01-27 18:14:44
Teacher's summary：border: 0; 以为不要这样写了, 应该写完整: border-width, border应该专用于简写