老师，为什么输入框中输入内容后，“还能输入的字数”不会改变？
来源：4-10 编程练习
廖可爱bongbong
2021-06-06 16:05:41
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入文本</title>
</head>
<body>
<p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script type="text/javascript">
//补充代码
// 获取元素
var overInput = document.getElementsByTagNameNS('span')[0];
var textInput = document.getElementById('text');
// 自定义一个变量，接收可输入的总字数（30）
var maxNum = 30;
// 绑定事件
textInput.onkeyup = function () {
var textLen = text.value.length;
//如果输入框中内容的长度超过30，页面提示已超出“输入字数总长度-可输入的总字数”字
if (textLen > 30) {
var overLen = textLen - maxNum;
overInput.innerHTML = '已超出' + '<b>' + overLen + '<b>' + '字';
} else {
var allowLen = maxNum - textLen;
span.innerHTML = '您还可以输入' + '<b>' + allowLen + '<b>' + '字';
}
}
2回答
-
廖可爱bongbong
提问者
2021-06-06
我已经找到原因了，修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入文本</title>
</head>
<body>
<p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script type="text/javascript">
//补充代码
// 获取元素
var overInput = document.getElementsByTagName('span')[0];
var textInput = document.getElementById('text');
// 自定义一个变量，接收可输入的总字数（30）
var maxNum = 30;
// 绑定事件
textInput.onkeyup = function () {
var textLen = text.value.length;
//如果输入框中内容的长度超过30，页面提示已超出“输入字数总长度-可输入的总字数”字
if (textLen > 30) {
var overLen = textLen - maxNum;
overInput.innerHTML = '已超出' + '<b>' + overLen + '<b>' + '字';
} else {
var allowLen = maxNum - textLen;
overInput.innerHTML = '您还可以输入' + '<b>' + allowLen + '<b>' + '字';
}
}
</script>
</body>
</html>
1 -
好帮手慕言
2021-06-06
同学你好，使用同学第二次提供的代码测试，效果是正确的，继续加油，祝学习愉快~
0
相似问题