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 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
小程序云开发之用户注册登录
May 18 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
vue实现简单图片上传
Jun 30 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 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创建自定义菜单的方法
2016/08/01 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python压包的概念及实例详解
2021/02/17 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
汽车维修工岗位职责
2014/02/12 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server