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

统计Textarea的输入字符数

2017-11-16 924

简介：
+关注继续查看

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


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

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

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

前端开发 JavaScript
textarea输入 输入框textarea textarea字数 textarea固定 textarea设置
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4170 Mifare Classic Tool(MCT)汉化版 16295 Linux中查看socket状态 2932 DHCP服务详解及配置 3120 Linux学习 Unit 7 1652
相关文章
游客wrov43iilwrsi
多组输入，一个整数（3~20），表示数字三角形边的长度，即数字的数量，也表示输出行数。
多组输入，一个整数（3~20），表示数字三角形边的长度，即数字的数量，也表示输出行数。
0 0
3it3iap2n2xxu
可多次输入，一个整数(2--20)，表示输出的行数，也表示X的反斜线和正斜线的长度...输出时，每行输出，都为X
可多次输入，一个整数(2--20)，表示输出的行数，也表示X的反斜线和正斜线的长度...输出时，每行输出，都为X
0 0
w53alm3uernjs
037.统计文件的字符数
037.统计文件的字符数
0 0
萌狼蓝天
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名？
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名？
0 0
技术mix呢
超级简单：在一个TextArea中如何限制行数和字符数
3180 0
技术小胖子
input显示输入字数
832 0
多吉
限制文本域输入字符个数，即使显示输入字符数和剩余字符数，超出不显示！
文本域： 1 2   3  已输入  字符，剩余  字符   4 ...
631 0
cometwo123
javascript 动态统计文本域输入字符个数
854 0
hybcoder
C#统计输入的字符类型数量
972 0
一叶飘舟
使用StreamTokenizer统计文件的字符数
793 0
+关注
技术小牛人
文章
问答
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4170 Mifare Classic Tool(MCT)汉化版 16295 Linux中查看socket状态 2932 DHCP服务详解及配置 3120 Linux学习 Unit 7 1652
文章排行榜
最热
最新
1 承上启下：基于全域漏斗分析的主搜深度统一粗排 91390
2 复杂链表的复制 90561
3 【Transform3D】转换详解（看完就会） 88093
4 【flexbox弹性布局学习指南】CSS热门布局方案 68781
5 DCM：中间件家族迎来新成员 61117
6 系统的混乱并业务本身之复杂，我们并不擅长处理『简单』 48258
7 超越10倍开发者 48111
8 ⚡Three.js-在场景中导入3D动画模型 46093
9 Request&Response 39078
10 《JavaScript高级程序设计》__ 作用域&内存 37882
11 如何实现一个自定义的starter 36587
12 影响成长的关键思考 34888
13 K8S学习-当我们部署应用的时候都发生了什么？（第一篇） 30660
14 【从零开始学习深度学习】12. 什么是模型的训练误差？基于三阶多项式的欠拟合与过拟合训练过程演示 27883
15 阿里云物联网平台设备分发实战 33487
16 ChatGPT 常见错误原因及解决方案：报错、回答不完整等 21120
17 Python3，5行代码，让你拥有无限量壁纸美图，终于告别手动下载了。 16260
18 Python3，区区9行代码批量提取PDF文件的指定内容，我被震惊了.... 5152
19 Python3，9行代码，对比两个Excel数据差异，并把差异结果重新保存。 8386
20 深聊性能测试，从入门到放弃之： Windows系统性能监控(一) 性能监视器介绍及使用。 9357
1 谈谈《流浪地球2》中如何正确的“重启互联网” 813
2 2023阿里云学生服务器免费申请流程 89
3 2023 年8个ChatGPT 的替代品 56
4 java: 错误: 无效的源发行版：17 53
5 YAML与Spring Boot 198
6 AI给你送年画啦！每一张都是独一无二 76
7 使用ChatGPT帮我们写一篇论文，最后查重的重复率会是多少？ 51
8 中原银行对金融行业实时数仓的现状与发展趋势思考 201
9 玖章算术CEO叶正盛：程序员必须掌握的数据库原理 116
10 万字长文 | 多目标跟踪最新综述（基于Transformer/图模型/检测和关联/孪生网络）（下） 68
11 Windows和Ubuntu双系统安装（非虚拟机） 152
12 2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时） 789
13 【解决方案】成功解决ERROR: Could not build wheels for opencv-python, which is required to install pyproject.toml-based projects报错信息 86
14 Image Search-这是你的图像搜索 152
15 C/C++编程题之简单错误记录 76
16 zynq操作系统： Linux驱动开发AXIDMA篇 58
17 启用了嵌套硬件辅助的虚拟化时，无法添加 PCI 直通设备。 65
18 学点Linux命令没坏处（文件压缩、解压） 70
19 Java学习笔记 139
20 Spring Cloud Alibaba 2022.0.0.0 版本发布啦！ 125
推荐文章
2022藏经阁年度电子书榜单出炉！ 参与应用引擎 SAE评测，赢取CHERRY机械键盘等好礼 “第益课”大学生技术公益 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载