文本框显示剩余个数（忽略文字与字符区别）
题目：完成如下的文本框输入字符数验证，同步显示剩余字符个数，最大不超过100字。
- 首先，在body中写入input标签与显示字符数的标签。如下：（我这边加了span与strong，strong用于动态显示剩余字符数字）
<body>
<input type="text" id="txt">
<br />
<span>可输入100个字符，还剩字符<strong id="check">100</strong></span>
</body>
- 其次，分析题目的要求。实现同步显示是属于js表单应用的文本框对象，使用input的onkeyup事件即可实现。
<script>
var currChars //定义当前剩余字符
var maxChars = 100
window.onload = function () {
var oText = document.getElementById('txt')
var oCheck = document.getElementById('check')
oText.onkeyup = function () { //文本框点击触发动态显示字符事件
currChars = maxChars - this.value.length //获取当前剩余字符数
if (currChars > 0) { //如果当前剩余字符数大于0，则动态显示
oCheck.innerHTML = currChars.toString()
} else {
oCheck.innerHTML = '0' //否则显示剩余字符为0
alert("禁止输入")
this.value = '' //否则将当前文本框清0
}
document.getElementsByTagName('span')[0].appendChild(oCheck) //生成动态剩余数字
}
}
</script>
-
结果如下：
image.png
总结，对于此类题目要确定要确定动态生成为onkeyup事件。其次生成的剩余数字是显示在span下的strong子标签中。
希望对此类型题目困扰的同学有所帮助！
