做评论需求的时候,一般文本框中都会限制最多可以输入的字数,新浪微博是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>
网友评论