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实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
利用vue实现模态框组件
Dec 19 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
srcElement表格样式
2006/09/03 Javascript
Hutia 的 JS 代码集
2006/10/24 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
初学Python函数的笔记整理
2015/04/07 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Python发展史及网络爬虫
2019/06/19 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
文秘人员工作职责
2014/01/31 职场文书
初中班主任评语大全
2014/04/24 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年消防工作总结
2014/11/21 职场文书
2015年推普周活动总结
2015/03/27 职场文书
优质护理服务心得体会
2016/01/22 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python