How jQuery calculates the number of words in a text box and limits the number of words in a text box

How jQuery calculates the number of words in a text box and limits the number of words in a text box_jquery

WBOY

Release： 2016-05-16 15:12:51

Original

1226 people have browsed it

A Chinese character counts as two, a symbol or number in English counts as one. (If 140 words are specified, multiply by 2, then it will be 280). The Math.ceil method needs to be used, because in the end it still needs to be divided by 2 to restore the number of words displayed to the user;

$(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") 
} 
} 
}) 
})

Copy after login

1. Function:

The calculation is performed while the user is typing, telling the user how many words are left to input;

When the specified number of words is exceeded, click OK and the input box will flash

2. Functional analysis

What event is the key point?

Standard browsers use oninput, while IE uses onpropertychange. The conditions for the occurrence of these two events are that the value of the text box changes.

Calculation of word count.

Flash background color

Modular operation is used here, because it is a repeated action. The first time there is color, and the second time there is no color. In this way, repeated actions will have a flashing effect.

Because the naked eye needs to see the color and colorless effects this time, delay, setTimeout and setInterval are needed. SetInterval is used here because the action needs to be repeated.

The following code introduces how to use jQuery to implement a text box that limits the number of input words.

1. Import external .js file:

<script src="http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>

Copy after login

2. Add the following code to the tag:

<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>

Copy after login

3. If there is default text in the input box when the page loads, the following jQuery code must be run when the page loads to display it correctly:

$("#word").text( 140 - $("#txt").val().length ) ;

Copy after login