Home >Web Front-end >JS Tutorial >How jQuery calculates the number of words in a text box and limits the number of words in a text box_jquery

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

WBOYOriginal: 2016-05-16 15:12:511232browse

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

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>

2. Add the following code to the 6c04bd5ca3fcae76e30b72ad730ca86d 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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS method to display calendar and weather_javascript skillsNext article：JS method to display calendar and weather_javascript skills

See more

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

Related articles