jQuery实现统计输入文字个数的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了jQuery实现统计输入文字个数的方法。分享给大家供大家参考。具体如下:

jQuery统计输入文字个数可以使用在统计回复字数,标题字数长度提示,增加友好度提高用户体验。代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery统计文字个数</title>

<script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

<ul>

  <li>

    <span>新闻标题:</span>

    <span><input id="news_title" name="news_title" type="text" size="60" onkeyup="title_len();" onclick="title_len();"  maxlength="80"/>

    <span id="titlelen">0/80</span>

  </li>

</ul>

</body>

<script language="javascript" type="text/javascript">

function title_len(){

 var value = $('#news_title').val().length;

 if(value == 80){

  var string = "<span style=\"color:#FF0000\">"+value+"/80</span>";

 }else{

  var string = "<span style=\"color:#FF0000\">"+value+"</span>/80";

 }

 $('#titlelen').html(string);

}

</script>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
jQuery处理json数据返回数组和输出的方法
Mar 11 #Javascript
jquery实现表格本地排序的方法
Mar 11 #Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 #Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 #Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 #Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 #Javascript
JavaScript前补零操作实例
Mar 11 #Javascript
You might like
PHP cron中的批处理
2008/09/16 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Python实现端口检测的方法
2018/07/24 Python
python config文件的读写操作示例
2019/09/27 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
高校教师思想汇报
2014/01/11 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL