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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
javascript prototype 原型链
Mar 12 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
vue.js实现二级菜单效果
Oct 19 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(4) php 函数 补充2
2010/02/15 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python实现的udp协议Server和Client代码实例
2014/06/04 Python
web.py在模板中输出美元符号的方法
2014/08/26 Python
python对字典进行排序实例
2014/09/25 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python argparse模块使用方法解析
2020/02/20 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
行政主管岗位职责
2013/11/18 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
节能环保演讲稿
2014/08/28 职场文书
蜗居观后感
2015/06/11 职场文书
网吧温馨提示
2015/07/17 职场文书
七年级思品教学反思
2016/02/20 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL