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 相关文章推荐
用javascript添加控件自定义属性解析
Nov 25 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 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无限级分类方法及代码
2013/06/21 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python正规则表达式学习指南
2016/08/02 Python
python 全文检索引擎详解
2017/04/25 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python3运算符常见用法分析
2020/02/14 Python
Python datetime 如何处理时区信息
2020/09/02 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
AJAX都有哪些有点和缺点
2012/11/03 面试题
民族团结先进个人材料
2014/02/05 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
MYSQL 运算符总结
2021/11/11 MySQL