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实现代码
Oct 01 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
如何使用vue slot创建一个模态框的实例代码
May 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 mysql like 实现多关键词搜索的方法
2016/10/29 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
Javascript中神奇的this
2016/01/20 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python双链表原理与实现方法详解
2020/02/22 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
pandas DataFrame运算的实现
2020/06/14 Python
python安装后的目录在哪里
2020/06/21 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
行政部岗位职责范本
2014/03/13 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
个人工作总结范文2014
2014/11/07 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers