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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
小程序实现发表评论功能
Jul 06 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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读取javascript设置的cookies的代码
2010/04/12 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
大学生护理专业自荐信
2013/10/03 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
爱护公共设施标语
2014/06/24 职场文书
承诺书样本
2014/08/30 职场文书
文案策划岗位职责
2015/02/11 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
八年级英语教学反思
2016/02/15 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技
MySQL自定义函数及触发器
2022/08/05 MySQL