编程练习

来源：4-10 编程练习

卷毛奋斗中

2022-07-04 14:35:51

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>

<script>
//获取元素
let text = document.getElementById('text');
let span = document.querySelector('span');

text.oninput = function () {
//获取文本域里面的值
let cont = text.value;
//获取用户输入内容的长度
let len = cont.length;

//判断用户输入的长度是否超过30
if (len > 30) {
span.innerHTML = '已超出<b>' + (len - 30) + '<b>字';
} else {
span.innerHTML = '您还可以输入<b>' + (30 - len) + '<b>字';
}
}
</script>
</body>

</html>

写回答

1回答