摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>输入字数</title> <style> *{margin: 0;padding: 0;} textarea{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入字数</title>
<style>
*{margin: 0;padding: 0;}
textarea{margin: 100px auto 0;display: block;background: #aefffe;}
button{width: 80px;height: 30px;background:blue;border-radius: 3px;color:white;margin: 20px auto 0;display: block;}
button:hover{cursor: pointer;}
div div{width: 400px;margin:20px auto;}
</style>
</head>
<body>
<div id="txt">
<textarea id="txtInput" cols="100" rows="10" onkeyup="txtChange()" placeholder="请输入文字"></textarea><br>
<div><span>您已输入</span><span id="txtCount">0</span><span>个字符，还可以输入</span><span id="txtLeft">140</span><span>个字符</span></div>
<button id="mysubmit" type="button" onclick="mysubmit()">提交</button>
</div>
</body>
<script>
var txtCount = document.getElementById("txtCount");
var txtInput = document.getElementById("txtInput");
var txtLeft = document.getElementById("txtLeft");
function txtChange(){
txtCount.innerText=txtInput.value.length;
txtLeft.innerText = 140-txtInput.value.length;
}
function mysubmit(){
if(txtLeft.innerText==140){
alert("输入不能为空");
}else if(txtLeft.innerText<0){
alert("不能超过140字");
}else{alert("提交成功")};
}
</script>
</html>
-------------------------
效果图
-------------------------
思路：
1、两个span用于实时计数
2、js获取文本域的值的长度
3、onkeyup事件触发给span文本赋值上一步获取的文本长度
4、点击提交按钮时，对字数进行判断，字数为零或字数超过140时，弹出警告信息
批改老师：天蓬老师批改时间：2019-04-13 21:55:24
老师总结：你的变量与函数的命名非常的规范, 事件也运行的正确...
顺便说一下,微博早已取消字数限制了
