JS 实时控制input字数

最新推荐文章于 2024-07-15 18:16:26 发布

CrabbyZh

最新推荐文章于 2024-07-15 18:16:26 发布

阅读量1.2k

点赞数 1

分类专栏：前端技术文章标签：前端技术

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS 实时控制input字数

输入框控制字数
- 步骤概述
- 代码示例

输入框控制字数

当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>