<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.text span {
font-weight: bold;
color: brown
}
em {
font-style: normal
}
</style>
</head>
<body>
<div>
<p class="text">还可以输入
<span>
<em id="count">30</em>
</span>
</p>
<div class="input">
<textarea name="" id="" cols="70" rows="4"></textarea>
</div>
</div>
<script>
//获取文本框
var text = document.getElementById("text");
var abc = 30;
var count = document.getElementById("count");
//绑定键盘事件
document.onkeyup = function () {
//获取文本框长度
var len = text.value.length;
var changdu = abc -len;
count.innerHTML = changdu
}
</script>
</body>
</html>
聪明的汤姆