前端技术非常有用的JS代码片段

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

2017-10-18  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读