JQuery统计input和textarea文字输入数量(代码分享)


Posted in Javascript onDecember 29, 2016

本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下。

HTML部分:

<input type="text" value="我是输入的文字" maxlength="10" id="detail1"/>
<p><span id="detail1_num">0</span>/<span>10</span></p>
<textarea placeholder="最多输入100字" rows="3" maxlength="100" class="editDetail" id="detail2" >呵呵</textarea>
<p><span id="detail2_num">0</span>/<span>100</span></p>

JS部分:

$(function(){ 
 /*input字数*/
 /*在页面刚载入时先显示出输入框的字数*/
 var text1=$("#detail1").val();
 var counter1=text1.length;
 $("#detail1_num").text(counter1);
 /*添加触发事件进行动态计算输入框的字数*/
 $("#detail1").on('blur keyup input',function(){
 var text=$("#detail1").val();
 var counter=text.length;
 $("#detail1_num").text(counter);
 });
 /* textarea字数*/
 var text2=$("#detail2").val();
 var counter2=text2.length;
 $("#detail2_num").text(counter2);
 $("#detail2").on('blur keyup input',function(){
 var text=$("#detail2").val();
 var counter=text.length;
 $("#detail2_num").text(counter);
 });
});

效果图如下:

JQuery统计input和textarea文字输入数量(代码分享)

由于博主主要做移动端开发,刚开始在移动端测试时由于输入文字是会出现输入框,在输入框中输入的文字在计算时会出现错误,所以又添加了一个input事件,这个事件会在输入框内边输入边进行计算(主要是拼音输完以后确认汉字部分)。

希望对大家有帮助。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
js图片处理示例代码
May 12 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JQuery中clone方法复制节点
May 18 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
jQuery实现遮罩层登录对话框
Dec 29 #Javascript
JS实现的简易拖放效果示例
Dec 29 #Javascript
使用DeviceOne实现微信小程序功能
Dec 29 #Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 #Javascript
浅谈js算法和流程控制
Dec 29 #Javascript
You might like
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
pandas针对excel处理的实现
2021/01/15 Python
利用python实现汉诺塔游戏
2021/03/01 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
房产授权委托书范本
2014/09/22 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL