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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
JS作用域链详解
Jun 26 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
JS中数据结构之栈
Jan 01 Javascript
详解Vue template 如何支持多个根结点
Feb 10 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数据库初学者使用指南
2006/11/16 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
php语法检查的方法总结
2019/01/21 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python中while和for的区别总结
2019/06/28 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
python中的测试框架
2020/11/13 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
企业管理部经理岗位职责
2013/12/24 职场文书
师德个人剖析材料
2014/02/02 职场文书
安全责任协议书
2014/04/21 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript