如何统计Textarea的输入字符数

这篇文章将为大家详细讲解有关如何统计Textarea的输入字符数，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

HTML代码：

        还可以输入500个文字

CSS代码：

.item-textarea{    position: relative;}.item-textarea textarea{    width: 100%;    height: 100px;    padding: 10px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    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: 1px solid #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文件，这里用到一个匿名的自调函数

(function( ){    var textArea = $('textarea');    var numItem = $('i');    var max = numItem.text(); //i标签中的内容，也就是最多可以显示的字符数    var curLength = textArea.val().length; //当前的字符数    textArea.attr('maxlength',max); //设置最大字符数，如果去掉的话，i标签内会出现负数    numItem.text(max - curLength); //实时更新i标签中的数量    textArea.on('input propertychange', function () {        //$(this) ---> 指代textarea        numItem.text(max - $(this).val().length);    });})()

关于如何统计Textarea的输入字符数就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。