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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
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
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
js+css实现打字效果
2020/06/24 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
十八大闭幕感言
2014/01/22 职场文书
大学生军训感想
2014/02/16 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
运动会新闻稿
2015/07/17 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
golang goroutine顺序输出方式
2021/04/29 Golang
浅谈Web Storage API的使用
2021/06/23 Javascript
浅谈MySQL中的六种日志
2022/03/23 MySQL
Python+Tkinter制作专属图形化界面
2022/04/01 Python