JS 实时控制input字数
程序员文章站
2022-04-21 22:32:31
...
输入框控制字数
当form表单需要校验输入框中的字符数时，需要用到的方法：
步骤概述
- 在html中定义的input输入框，设置一个id值
- 在输入框中绑定一个onkeydown事件
- 定义onkeydown事件发生时的处理函数controlLen
- 在controlLen函数中检查input输入框的输入值长度n
- 当大于规定的字符长度时，利用字符创的substring重新截取输入值的前n个值，重新赋值给input框，同时alert提示。
代码示例
<script type="text/javascript">
function controlLen(){
//获取input输入框元素
var inputText = document.getElementById('mytext').value;
if(inputText.length > 10){
var text = inputText.substring(0,10);
document.getElementById('mytext').value = text;//重新设置input输入框的值
alert("最多输入10个字符");
}
}
</script>
html代码：
<body>
<input type="text" id="mytext" value="" onkeydown="controlLen();"/>
</body>
下一篇： 内置组件component实现动态组件