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十个最常用的自定义函数(中文版)
Sep 07 Javascript
可以将word转成html的js代码
Apr 11 Javascript
jquery 插件开发备注
Aug 27 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
javascript函数式编程基础
Sep 15 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
js实现简单进度条效果
2020/03/25 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python利用beautifulSoup实现爬虫
2014/09/29 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
大学毕业生自我鉴定
2013/11/05 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
太空授课观后感
2015/06/17 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL