美文网首页前端技术非常有用的JS代码片段
js实现限制textarea最多输入140个字

js实现限制textarea最多输入140个字

作者: 愿你如夏日清凉的风 | 来源:发表于2017-10-18 17:21 被阅读25次

    做评论需求的时候,一般文本框中都会限制最多可以输入的字数,新浪微博是140个字,我这里就拿140个字的为例,做了一个特别简单的demo,可能还有很多地方没有考虑到,后面再慢慢优化吧。下面直接看代码:
    HTML代码:

    <textarea name="commentContent" id="commentContent" class="comment-content" placeholder="发表你的精彩评论,还可以输入140字" onkeyup="checkTextLen(this)"></textarea>
    <span id="checklen">还可输入 <strong>140</strong> 个汉字</span>
    <button type="button" class="published" id="publishedComment">发表</button>
    

    javascript代码:

    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        function checkTextLen(obj) {
            var val = $(obj).val().length;
            if (val <= 140) {
                $("#checklen").html("还可输入 <strong>"+ Math.floor(140-val) +"</strong> 个字").css('color', '');
                $("#publishedComment").removeAttr("disabled").css("background","#007aff");
            }else {
                console.log("最多输入140个字符!");
                $("#publishedComment").attr("disabled", "disabled").css("background","#ccc");
                $("#checklen").html(" 已经超过<strong>"+ Math.floor(val-140) +"</strong> 个字").css('color', '#f00');
            }
        }
    </script>
    

    相关文章

      网友评论

        本文标题:js实现限制textarea最多输入140个字

        本文链接:https://www.haomeiwen.com/subject/xlyeuxtx.html