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.
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;
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
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 ) ;
How to connect vb to access database
What are the ways to clear floats?
Ripple future forecast
How to view processes in linux
Second-level domain name query method
busyboxv1.30.1 cannot boot
Intouch report production method
How to solve the problem that laptop network sharing does not have permissions?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
