Home > Article > Web Front-end > How to control the number of words in jquery
How to control the number of words in jquery
- 藏色散人Original
- 2021-11-11 10:15:141573browse
Methods for jquery to control the number of words: 1. Import external js files; 2. "$("#txt").keyup(function(){...}" in the
tag, etc. Code; 3. Just run the jQuery code when the page loads.
The operating environment of this article: windows7 system, jquery version 1.2.6, DELL G3 computer
How does jquery control the number of words?
How jQuery calculates the number of words in a text box and limits the number of words in a text box
One Chinese character counts as two, one symbol or number, In English, count one. (If it is 140 characters, multiply by 2, then it is 280). You need to use the Math.ceil method, because in the end you still need to divide 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 user input calculation is performed at the same time, telling the user how many words are left to input;
When the specified number of words is exceeded Finally, click OK, and the input box will flash
2. Function analysis
What event is the key point to use?
Standard browsers use oninput, while IE uses onpropertychange. The condition for the occurrence of these two events is that the value of the text box changes.
Calculation of the number of words.
One Chinese character counts as two, and one symbol or number in English counts as one. (If It specifies 140 words, multiplied by 2, then it is 280). You need to use the Math.ceil method, because in the end you still need to divide by 2 to restore the number of words displayed to the user;
Flashing 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. Such repeated actions will have a flashing effect.
Because it needs to be seen by the naked eye. This time there are color and colorless effects, so you need to use delay, setTimeout and setInterval. SetInterval is used here because the action needs to be repeated.
The following code will introduce to you how to implement it with jQuery Text box that limits the number of input characters.
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
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, then the following jQuery code must be run when the page loads to display it correctly:
$("#word").text( 140 - $("#txt").val().length ) ;Recommended learning: "jquery video tutorial"
The above is the detailed content of How to control the number of words in jquery. For more information, please follow other related articles on the PHP Chinese website!