jquery textarea还剩余字数统计效果分享
jquery吧
全部回复
仅看楼主
level 4
谭小斌_白 楼主
div+css部分:
<div class="wordCount" id="wordCount">
<textarea placeholder="textarea还剩余字数统计"></textarea>
<span class="wordwrap"><var class="word">200</var>/200</span>
</div>
body,a{ font-size: 14px; color: #555;;}
.wordCount{ position:relative;width: 600px; }
.wordCount textarea{ width: 100%; height: 100px;}
.wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}
.wordCount .word{ color: red; padding: 0 4px;;}
javascript部分:
$(function(){
//先选出 textarea 和 统计字数 dom 节点
var wordCount = $("#wordCount"),
textArea = wordCount.find("textarea"),
word = wordCount.find(".word");
//调用
statInputNum(textArea,word);
});
function statInputNum(textArea,numItem) {
var max = numItem.text(),
curLength;
textArea[0].setAttribute("maxlength", max);
curLength = textArea.val().length;
numItem.text(max - curLength);
textArea.on('input propertychange', function () {
numItem.text(max - $(this).val().length);
});
}
最好调用插件jquery库:<script src="http://www.bird100.cn/wp-content/uploads/2016/demo/jquery/static/js/vendor/jquery.min.js"></script>
前端菜鸟:http://www.bird100.cn/7771.html
2016年05月19日 16点05分 1
1