189 8069 5689

如何统计Textarea的输入字符数-创新互联

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

创新互联公司从2013年成立,是专业互联网技术服务公司,拥有项目成都网站设计、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元西藏做网站,已为上家服务,为西藏各地企业和个人服务,联系电话:13518219792

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;
}

简单看下当前的页面效果:

如何统计Textarea的输入字符数

为了方便,首先引入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的输入字符数

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

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


网站名称:如何统计Textarea的输入字符数-创新互联
文章分享:http://cdxtjz.cn/article/cdejhs.html

其他资讯