jQuery怎样实现文本框字数限制的功能?
Admin 2022-01-20 群英技术资讯 576 次浏览
这篇文章给大家分享的是jQuery怎样对文本框字数限制的方法。一般的文本输入框都是有字数限制的,下文我们尝试用jQuery怎样计算输入字数及控制和限制字数,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
本文操作环境:windows7系统、jquery1.2.6版、DELL G3电脑
jquery怎么控制字数多少?
jQuery计算文本框字数及限制文本框字数的方法
一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个)。需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数;
$(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 ) ;
以上就是jquery限制文本框字数的介绍,本文只是提供了一种实现思路,代码仅供参考,需要的朋友可以了解看看,希望对大家学习JavaScript有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自PHP中文网
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要给大家介绍了关于JavaScript中常用的3种弹出提示框(alert、confirm、prompt)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
用javascript编程求水仙花数的方法:1、使用for循环查找遍历所有三位数;2、判断遍历的数字是否是各个位数的数字的3次幂数之和是否等于数字本身;3、分别选取个十百位上的数;4、用if语句判断i是否是水仙花数即可。
这篇文章主要介绍了关于Javascript闭包与应用的详解,文中有非常详细的代码示例.对正在学习js的伙伴们有很好的帮助,需要的朋友可以参考下
并发控制是确保及时纠正由并发操作导致的错误的一种机制。我们在开发过程中,有时会遇到需要控制任务并发执行数量的需求。那么就需要做并发控制。例如一个爬虫程序,可以通过限制其并发任务数量来降低请求频率,从而避免由于请求过于频繁被封禁问题的发生。关于并发控制大家都了解了,下面我们就来说说JavaScript怎样实现并发控制?
简单来说,Node.js对我们项目来讲相当于一个编译环境,类似于我们java语言编译需要Jvm虚拟机一样。安装Node.js后我们就可以编译Node项目啦。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008