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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
JavaScript实现通讯录功能
Dec 27 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP 文件上传限制问题
2019/09/01 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JavaScript中string对象
2015/06/12 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python3基础之基本数据类型概述
2014/08/13 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
招商专员岗位职责
2014/02/08 职场文书
超市开学活动方案
2014/03/01 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
员工离职感谢信
2015/01/22 职场文书
会计试用期自我评价
2015/03/10 职场文书
入党后的感想
2015/08/10 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
python基于机器学习预测股票交易信号
2021/05/25 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL