前端开发JS 限制input框的输入字数,并提示可输入字数

前端模块化开发规范
前端工程化、模块化开发方式
前端模块化开发实例

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>限制文件字数字</title>
</head>
<body>
    <span class=”span”>备注信息</br><span id=”stay” style=”display: none”>&nbsp;您还可以输入:<span id=”txtCount”></span>个字符的描述信息</span></span>
    </br><input id=”Remark_information” name=”Remark_information” type=”text”>
        <script>
            var lim =newlimit();
            lim.txtNote =document.getElementById(“Remark_information”);
            lim.txtLimit =document.getElementById(“txtCount”);
            lim.limitCount =80;
            lim.init();
            function limit() {
                var txtNote;//文本框
                var txtLimit;//提示字数的input
                var limitCount;//限制的字数
                var txtlength;//到达限制时,字符串的长度
                this.init = function () {
                    txtNote =this.txtNote;
                    txtLimit =this.txtLimit;
                    limitCount =this.limitCount;
                    txtNote.oninput=function(){wordsLimit()}; txtNote.oninput=function(){wordsLimit()};
                    txtLimit.innerText = limitCount;
                };
                function wordsLimit() {
                    var noteCount = txtNote.value.length;
                    var InPut =document.getElementById(“Remark_information”).value.length;
                    if (InPut < 1) {
                        document.getElementById(“stay”).style.display=”none”;
                        return
                    }
                    if (InPut >= 1) {
                        document.getElementById(“stay”).style.display=”inline”;
                        document.getElementById(“stay”).style.color=”green”;
                    }
                    if (InPut > 70) {
                        document.getElementById(“stay”).style.color=”red”;
                    }
                    if (noteCount > limitCount) {
                        txtNote.value= txtNote.value.substring(0, limitCount);
                        txtLimit.innerText =0;
                    } else {
                        txtLimit.innerText = limitCount – noteCount;
                    }
                    txtlength = txtNote.value.length;//记录每次输入后的长度
                }
            }
        </script>
</body>
前端模块化开发概念
前端模块化开发案例
前端模块化开发的优点和缺点
» 本文来自:前端开发者 » 《前端开发JS 限制input框的输入字数,并提示可输入字数》
» 本文链接地址:https://www.rokub.com/6987.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!