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图片平滑连续滚动插件
Apr 27 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
JavaScript实现表单验证功能
Dec 09 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP常用的小程序代码段
2015/11/14 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python递归函数实例讲解
2019/02/27 Python
【python】matplotlib动态显示详解
2019/04/11 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
python的help函数如何使用
2020/06/11 Python
增大python字体的方法步骤
2020/07/05 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
实习护士自我鉴定
2013/10/13 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
销售队伍口号
2014/06/11 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Nginx安装配置详解
2022/06/25 Servers
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers