js动态提示输入框剩余字符数

最新推荐文章于 2021-06-05 07:42:43 发布

kiwill

最新推荐文章于 2021-06-05 07:42:43 发布

阅读量2.7k

点赞数

分类专栏： .net javascript 文章标签： function border class div

本文链接：https://blog.csdn.net/kiwill/article/details/7890610

版权

.net 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

效果如上面两图。

页面代码为：

                <dd class="ediTabCont">
                    <textarea name="Note" id="message" cols="" rows="" style="width: 370px; height: 128px; border: 1px solid #ccc"></textarea>
                    <p>
                        <em>Optional</em><span><b id="num" style="color:#ff0000">8000</b> characters left</span></p>
                </dd>

JS代码为：

            $(document).ready(function() {
            initBind();
        })
        
        function initBind()
        {
            $("#message").blur(function(){ checkMessage();});
            $("#message").keyup(function() { checkMessage(); });
            $("#message").keydown(function() { checkMessage(); });
        }
        
        function checkMessage()
        {
            $("#num").html(8000 - $('#message').val().length);
            var pattern = /[\s\S]{20,2000}/;
            if($('#message').val().length  != 0)
            {
            if(!pattern.test($('#message').val()) || $('#message').val().length < 20)
            {
                err = false;
                $("#errmessage").show();
            }          
             else
            {
                err = true;
                $("#errmessage").hide();
                if (err1 && err2 && err3 && err) {
                    $("#Button1Error").hide();
                }
            }
            }
            else
            {
                err = true;
                $("#errmessage").hide();
                if (err1 && err2 && err3 && err) {
                    $("#Button1Error").hide();
                }
            }
        }

js里面有设置报错的div显示与隐藏，大家视情况添加或不添加都可以。