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

统计Textarea的输入字符数

2017-11-16 899

简介：
+关注继续查看

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网站 4019 Mifare Classic Tool(MCT)汉化版 15824 Linux中查看socket状态 2648 DHCP服务详解及配置 2808 Linux学习 Unit 7 1562
相关文章
科技小能手
jQuery插件InputLimitor实现文本框输入限制字数统计
1221 0
科技小能手
彻底解决Windowless=true情况下TextBox不能输入的问题
1017 0
iamhej
文本框中只能输入数字
1 同上上篇日志  老师给的代码 Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.
770 0
itkeke
php版微信返回用户text输入的方法
本文实例讲述了php版微信返回用户text输入的方法。分享给大家供大家参考，具体如下： 获得用户输入的内容，并发回相同内容
1284 0
技术小哥哥
关于FastStone Capture输入中文出现乱码.
2346 0
一叶飘舟
自定义程序实现Android EditText只允许输入指定字符
1707 0
祝犁
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建，在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18716 0
技术小胖子
textarea显示剩余字数
1121 0
一叶飘舟
Android中EditText的输入字数限制
1107 0
技术小牛人
jQuery+正则+文本框只能输入数字
929 0
+关注
技术小牛人
5723
文章
0
问答
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4019 Mifare Classic Tool(MCT)汉化版 15824 Linux中查看socket状态 2648 DHCP服务详解及配置 2808 Linux学习 Unit 7 1562
文章排行榜
最热
最新
1 万字长文带你玩转阿里云ECS云服务器（涵盖ECS产品购买、ECS管理、ECS快速部署云盘服务、ECS快照原理） 79678
2 凌晨三点评测——IT小白之神兵利器ECS初体验 74745
3 如何在云端重塑内容生产？来看这场虚拟人主持的发布会 73966
4 【ECS测评大赛】ECS C5全方位对比测评、服务搭建(含Alinux 3) 36290
5 为天猫精灵开发一个日程小秘书 17769
6 阿里云RemoteShuffleService新功能：AQE和流控 14551
7 天猫精灵实现无唤醒词推送断网播报 11510
8 看模板：一份基础简历的必含模块有哪些 9445
9 【转载】基于MaxCompute的大数据安全方案 7965
10 上古神器WireGuard异地高效率组网 7900
11 数据仓库的分层架构与演进 6715
12 修行Android Studio技巧到出神入化，快速涨薪-【快捷键】和【演示】篇 8108
13 手把手教你在阿里云ECS上搭建惊艳的博客 18228
14 天猫精灵解决选择焦虑【今天吃什么】 15743
15 1小时入门天猫精灵有屏音箱语音技能开发 24449
16 阿里云服务器ECS购买、部署Web站点流程详解 11173
17 ecs宝塔搭建wordpress个人博客 27344
18 某智能终端厂商流量商业化项目的云原生大数据平台实践 2270
19 搭建自己的FTP服务器 1713
20 异步任务处理系统，如何解决业务长耗时、高并发难题？ 1644
1 ASK集群根据tag分账 202
2 MySQL性能优化(一)：MySQL架构与核心问题 105
3 2022年电工杯B 题 5G 网络环境下应急物资配送问题思路分析 1779
4 深度学习与CV教程(3) | 损失函数与最优化 323
5 深度学习与CV教程(2) | 图像分类与机器学习基础 351
6 深度学习与CV教程(1) | 引言与知识基础 346
7 深度学习与计算机视觉教程：斯坦福CS231n · 全套笔记解读 330
8 阿里10年沉淀｜那些技术实战中的架构设计方法 58
9 Flink 1.15 新功能架构解析：高效稳定的通用增量 Checkpoint 226
10 硬之城获阿里云首批产品生态集成认证，携手阿里云共建新合作 145
11 阿里巴巴云数据仓库 MaxCompute 数据安全最佳实践 116
12 前端质量｜基于业务驱动的前端性能有效实践案例 78
13 阿里云云原生一体化数仓入选 2022数博会“十佳大数据案例” 77
14 从“预见”到“遇见” | SAE 引领应用步入 Serverless 全托管新时代 74
15 MaxCompute 公共云多租户设计的技术要点详解及产品实现特色 126
16 Maven - 国内Maven仓库之阿里云Aliyun仓库地址及设置 109
17 回顾｜Flink CDC Meetup（附 PPT 下载） 239
18 无影云应用重磅发布 68
19 走进RDS｜说说关系型数据库与Serverless 93
20 直播预告 | PolarDB-X 动手实践系列——基于 Prometheus + Grafana 的 PolarDB-X 监控体系 53
推荐文章
《云原生实战案例集》重磅发布！ “第益课”大学生技术公益实践计划免费报名中 大咖手把手带你玩转RDS MySQL，学习到实践免费体验 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
JS零基础入门教程（上册）
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS，云启实验室实战指南
立即下载