宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-17

一个中文数两个,一个符号或数字,英文数一个。(如果指定140个字,乘以2,那么就是280)。需要使用Math.ceil方法,因为最终还是需要除以2才能恢复显示给用户的字数;

$(function(){ var $tex=$(')。tex’);var $但=$('。但是’);var ie=jquery . support . html serialize;var str=0;var ABC num=0;var maxNum=280var 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()。替换(/ w/g ' ')。长度;//非中文字符数abcnum=$tex.val()。长度字符串;total=str * 2 abcnumif(str * 2 abcnumaxnum | | str * 2 abcnum==maxNum){ $ but . remove class()$ but . addclass(' but ');texts=math . ceil((MaxNum-(str * 2 abcnum))/2);$('p ')。html ('span' texts'/span ')。儿童()。CSS({ ' color ' : ' blue ' });} else if(str * 2 abcnumxnum){ $ but . remove class(')$ but . addclass(' grey ');texts=math . ceil((str * 2 abcnum)-maxNum)/2);$('p ')。html('您输入的字数超过了span' texts'/span ')。儿童(' span ')。CSS({ ' color ' : ' red ' });} }//点击$ but . Click(function(){ if($(this))。是('。grey’){ set=set interval(flash,100);$tex.addClass('textColor') }函数flash(){ num;if(num==4){ clearInterval(set);} if (num% 2==1) {$ tex。add class(' text color ')} else { $ tex。removeclass ('textcolor')}})}) I .函数:

用户同时输入和计算,告诉用户还剩多少单词要输入;

超过指定字数时,点击确定,输入框会闪烁。

二是功能分析。

什么事件是焦点?

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

字数。

一个中文数两个,一个符号或数字,英文数一个。(如果是140字,乘以2,那么就是280)。需要使用Math.ceil方法,因为最终还是需要除以2才能恢复显示给用户的字数;

闪烁的背景色

这里用的是模块化操作,因为是重复动作,第一次有颜色,第二次没有颜色,所以重复动作会有闪烁效果。

因为肉眼想看到这两种有色和无色的效果,所以需要时间延迟,setTimeout和setInterval。这里使用了setInterval,因为它需要重复操作。

下面的代码介绍了如何使用jQuery实现限制输入字数的文本框。

1.外部导入。js文件:

script src=' http :http://static . l99.com/js/jquery/jquery-1 . 2 . 6 . pack . js ' type=' text/JavaScript '/script 2。在body标签中添加以下代码:

您也可以输入span id=' word ' 140/span words br/text area id=' txt ' name=' cols=' ' row=' '/text area scrip language=' JavaScript ' type=' text/JavaScript ' $(' # txt ')。keyup(function(){ if($('#txt '))。val()。长度140){$('#txt ')。val($('#txt ')。val()。子串(0,140));}$('#word ')。文本(140 - $('#txt ')。val()。长度);});/script/body3。如果加载页面时输入框中有默认文本,则应在加载页面时运行以下jQuery代码,然后才能正确显示:

$('#word ')。文本(140 - $('#txt ')。val()。长度);

更多资讯
游戏推荐
更多+