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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js日期相关函数总结分享
Oct 15 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue.js循环radio的实例
Nov 07 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php中文本操作的类
2007/03/17 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python: glob匹配文件的操作
2020/12/11 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
opencv实现图像平移效果
2021/03/24 Python
大学生职业生涯规划书前言
2014/01/09 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
离职证明标准格式
2014/09/15 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Nginx 常用配置
2022/05/15 Servers
MySQL深分页问题解决思路
2022/12/24 MySQL