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中的Screen屏幕对象
Jan 16 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
浅谈PHP中的
2016/04/23 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Python实现验证码识别
2020/06/15 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
优秀村官事迹材料
2014/01/10 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
物业保安员岗位职责
2014/03/14 职场文书
80后婚前协议书范本
2014/10/24 职场文书
地震慰问信
2015/02/14 职场文书
中学语文教学反思
2016/02/16 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS