4-10作业
来源：4-10 编程练习
从不学习
2021-09-22 20:47:03
相关截图：
问题描述：
是这样吗
2回答
-
好帮手慕慕子
2021-09-23
同学你好，由于超出后，替换了span标签中的内容，此时b标签已经不存在了，导致超出后回删到小于30位字符时，无法再给b标签设置内容，所以提示信息不再发生变化，如下图所示：
建议修改：直接使用onkeyup事件，获取输入框中的内容，根据内容的长度进行判断，然后直接设置span元素的innerHTML属性值即可，示例：
祝学习愉快~
0 -
从不学习
提问者
2021-09-22
<!DOCTYPE html>
<html>
<head>
<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 textArea = document.getElementById("text");
var overplus = document.getElementsByTagName("b")[0];
var overspan = document.getElementsByTagName("span")[0];
var keysum = 0
textArea.onkeydown = function(e){
if(e.code != "Backspace"){
keysum++;
}else{
keysum--;
}
console.log(keysum,e)
}
textArea.onkeyup = function(){
if( 30-keysum < 0){
var oversum = keysum-30
overspan.innerHTML="您已超出"+oversum
}else{
overplus.innerHTML=30-keysum
}
}
</script>
</body>
</html>
0
相似问题