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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
js html实现计算器功能
Nov 13 Javascript
JS实现多选框的操作
Jun 24 Javascript
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脚本的10个技巧(8)
2006/10/09 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
理解JS绑定事件
2016/01/19 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python的迭代器和生成器
2015/07/29 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
上课打牌的检讨书
2014/02/15 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技