实现Textarea字数统计代码,Css代码库,德仔网

代码语言

代码分类

【Css】实现Textarea字数统计

作者:依依 / 发布于2016/10/14/ 875

HTML 


<div class="item-textarea">
    <textarea></textarea>
    <i>500</i> characters left
</div>

CSS

.item-textarea{
    position: relative;
}
.item-textarea > textarea{
    width: 100%;
    height: 68px;
    padding: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #fff;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    border: solid 1px #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.14rem;
}
.item-textarea > span{
    display: block;
    position: absolute;
    right: 6px;
    bottom: 7px;
    color: #9a9a9a;
    font-size: 0.12rem;
}
.item-textarea > span > i{
    color: #55acef;
}



引入jQuery:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


JS
<script>
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);
        });
    }
$(function () {
    $(".item-textarea").each(function () {
        var textArea = $(this).find("textarea"),
            word = $(this).find("i");
        statInputNum(textArea, word);
    });
});
</script>

试试其它关键字

同语言下

可能有用的

依依贡献的其它代码(32)