开发者社区> 技术小牛人> 正文

统计Textarea的输入字符数

简介:
+关注继续查看

HTML代码:

1
2
3
4
<div class="item-textarea">
    <textarea></textarea>
    <span>还可以输入<i>500</i>个文字</span>
</div>


CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.item-textarea{
    positionrelative;
}
.item-textarea textarea{
    width100%;
    height100px;
    padding10px;
    -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);
    border1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size0.14rem;
}
.item-textarea span{
    displayblock;
    positionabsolute;
    right6px;
    bottom7px;
    color#9a9a9a;
    font-size0.12rem;
}
.item-textarea span i{
    color#55acef;
}


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

wKiom1gURx-RMHANAAAGm859ylc687.png

为了方便,首先引入jQuery文件,这里用到一个匿名的自调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
(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);
    });
})()

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1867095

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
文本框中只能输入数字
1 同上上篇日志  老师给的代码 Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.
770 0
php版微信返回用户text输入的方法
本文实例讲述了php版微信返回用户text输入的方法。分享给大家供大家参考,具体如下: 获得用户输入的内容,并发回相同内容
1284 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18716 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载