开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

统计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

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

相关文章
多组输入,一个整数(3~20),表示数字三角形边的长度,即数字的数量,也表示输出行数。
多组输入,一个整数(3~20),表示数字三角形边的长度,即数字的数量,也表示输出行数。
0 0
可多次输入,一个整数(2--20),表示输出的行数,也表示X的反斜线和正斜线的长度...输出时,每行输出,都为X
可多次输入,一个整数(2--20),表示输出的行数,也表示X的反斜线和正斜线的长度...输出时,每行输出,都为X
0 0
037.统计文件的字符数
037.统计文件的字符数
0 0
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名?
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名?
0 0
限制文本域输入字符个数,即使显示输入字符数和剩余字符数,超出不显示!
文本域: 1 2   3  已输入  字符,剩余  字符   4 ...
631 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载