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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
node使用promise替代回调函数
May 07 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
原生js生成图片验证码
Oct 11 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编程与应用
2006/10/09 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
浅谈php的优缺点
2015/07/14 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js left,right,mid函数
2008/06/10 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
便捷提取python导入包的属性方法
2018/10/15 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Java语言的优势
2015/01/10 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
英文简历中的自我评价
2013/10/06 职场文书
大学生暑期实践感言
2014/02/26 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
施工协议书范本
2014/04/22 职场文书
大学生操行评语大全
2014/12/31 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
生产车间管理制度
2015/08/04 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python