jQuery计算文本框字数及限制文本框字数的方法


Posted in Javascript onMarch 01, 2016

一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个)。需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数;

jQuery计算文本框字数及限制文本框字数的方法

$(function(){ 
var $tex = $(".tex"); 
var $but = $(".but"); 
var ie = jQuery.support.htmlSerialize; 
var str = 0; 
var abcnum = 0; 
var maxNum = 280; 
var texts= 0; 
var num = 0; 
var sets = null; 
$tex.val(""); 
//顶部的提示文字 
$tex.focus(function(){ 
if($tex.val()==""){ 
$("p").html("您还可以输入的字数<span>140</span>"); 
} 
}) 
$tex.blur(function(){ 
if($tex.val() == ""){ 
$("p").html("请在下面输入您的文字:"); 
} 
}) 
//文本框字数计算和提示改变 
if(ie){ 
$tex[0].oninput = changeNum; 
}else{ 
$tex[0].onpropertychange = changeNum; 
} 
function changeNum(){ 
//汉字的个数 
str = ($tex.val().replace(/\w/g,"")).length; 
//非汉字的个数 
abcnum = $tex.val().length-str; 
total = str*2+abcnum; 
if(str*2+abcnum<maxNum || str*2+abcnum == maxNum){ 
$but.removeClass() 
$but.addClass("but"); 
texts =Math.ceil((maxNum - (str*2+abcnum))/2); 
$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"}); 
}else if(str*2+abcnum>maxNum){ 
$but.removeClass("") 
$but.addClass("grey"); 
texts =Math.ceil(((str*2+abcnum)-maxNum)/2); 
$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"}); 
} 
} 
//按钮点击 
$but.click(function(){ 
if($(this).is(".grey")){ 
sets = setInterval(flash,100); 
$tex.addClass("textColor") 
} 
function flash(){ 
num++; 
if(num == 4){ 
clearInterval(sets); 
} 
if(num%2 == 1){ 
$tex.addClass("textColor") 
}else{ 
$tex.removeClass("textColor") 
} 
} 
}) 
})

一、功能:

用户边输入计算同时进行,告诉用户还剩余多少可输入的字数;

当超过规定的字数后,点击确定,会让输入框闪动

二、功能分析

重点是用什么事件?

标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变。

字数的计算。

一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个)。需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数;

闪动背景色

这里用到了模运算,因为是重复的动作,第一次有颜色,第二次没有颜色,这样重复的动作,就有闪动效果.

因为肉眼要看到这二次有颜色和无颜色的效果,所以需要用到延时,setTimeout和setInterval. 这里用到的是setInterval,因为要重复动作。

下面一段代码给大家介绍用jQuery实现限制输入字数的文本框。

1.导入外部.js文件:

<script src="http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>

2.在<body>标签中加入如下代码:

<body>
还可以输入<span id="word">140</span>个字<br />
<textarea id="txt" name="" cols="" rows=""></textarea>
<script language="javascript" type="text/javascript">
$("#txt").keyup(function(){ 
if($("#txt").val().length > 140){
$("#txt").val( $("#txt").val().substring(0,140) );
}
$("#word").text( 140 - $("#txt").val().length ) ;
});
</script>
</body>

3.如果页面加载时输入框中有默认文本,那么要在页面加载时运行如下jQuery代码,方能正确显示:

$("#word").text( 140 - $("#txt").val().length ) ;
Javascript 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
Angular2入门--架构总览
Mar 29 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 #Javascript
原生javascript实现解析XML文档与字符串
Mar 01 #Javascript
JS创建对象几种不同方法详解
Mar 01 #Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 #Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 #Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 #Javascript
ClearTimeout消除闪动实例代码
Feb 29 #Javascript
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php限制文件下载速度的代码
2015/10/20 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
django 2.0更新的10条注意事项总结
2018/01/05 Python
python通过zabbix api获取主机
2018/09/17 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python实现浪漫的烟花秀
2019/01/30 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
小学新教师培训方案
2014/02/03 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
酒店员工管理制度
2015/08/05 职场文书
关于五一放假的通知
2015/08/18 职场文书