文本框輸入文字倒計代碼執行個體:
通常情況下，文本框輸入的文字個數并不是無限制的，一般都會限定一個輸入最高上限，較為人性化的網站可能會有可輸入字數倒計效果，比如還剩餘20可以輸入這樣的提示，下面就通過一個執行個體介紹一下如何實作此效果。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>文本框輸入文字倒計效果代碼-螞蟻部落</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
.box
{
width:500px;
margin:10px auto;
}
p span
{
color:#069;
font-weight:bold;
}
textarea
{
width:300px;
}
.textColor
{
background-color:#0C9;
}
.grey
{
padding:5px;
color:#FFF;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var $tex=$(".tex");
var $but=$(".but");
var ie=jQuery.support.htmlSerialize;
var str=0;
var abcnum=0;
var maxNum=280;
var texts=0;
$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"});
}
}
})
</script>
</head>
<body>
<div class="box">
<p>請在下面輸入您的文字：</p>
<textarea name="weibao" class="tex" cols="" rows="8"></textarea>
</div>
</body>
</html>
一.實作原理:
首 先設定了一個最大可以輸入的文字數量。在代碼中規定一個漢字相當于兩個英文字元長度，并且為textarea文本框注冊oninput和 onpropertychange事件處理函數，這兩個事件的作用是一樣的都可以檢測文本框中内容的改變，一旦内容發生改變就會觸發這兩個事件，之是以是 兩個事件，是為了浏覽器相容性問題。事件處理函數可以檢測目前文本框中字元的長度，并給出相應的提示，這裡不多介紹了，具體可以看代碼注釋。
二.代碼注釋:
1.$(function(){})，當文檔結構加載完畢再去執行函數中的代碼，是$(document).ready(function(){})的簡寫。
2.var $tex=$(".tex")，取得class屬性值為.tex的jquery對象集合。
3.var ie=jQuery.support.htmlSerialize，用來進行浏覽器相容，在IE下傳回值為false，其他浏覽器為true。
4.var str=0，聲明一個變量，并将指派為0，在後面會用到。
5.var abcnum=0，聲明一個變量，并将指派為0，在後面會用到。
6.var maxNum=280，規定可以輸入内容的最大長度，注意這裡長度時指英文字元的長度。
7.var texts=0，聲明一個變量，并将指派為0，在後面會用到。
8.$tex.val("")，将textarea文本框中的内容清空。
9.$tex.focus(function(){})，為文本框注冊focus事件處理函數。
10.if($tex.val()==""){$("p").html("您還可以輸入的字數<span>140</span>");} ，如果文本框中的内容為空，那麼僵p中的文本設定為"您還可以輸入的字數140"，注意140個是指的漢字的個數，一個漢字占占兩個位元組，一個英文字元占一個位元組。
11.$tex.blur(function(){})，為文本框注冊blur事件處理函數。
12.if($tex.val() == ""){$("p").html("請在下面輸入您的文字：");}，當文本框失去焦點的時候，會将p元素的文本設定為"請在下面輸入您的文字："。
13.if(ie),如果是非IE浏覽器。
14.$tex[0].οninput=changeNum，$tex[0]可以将jquery元素轉換DOM元素。為文本框的oninput事件注冊事件處理函數。
15.else{$tex[0].onpropertychange=changeNum;}，如果是IE浏覽器，則為文本框的onpropertychange事件注冊事件處理函數。
16.function changeNum(){}，此函數是oninput事件和onpropertychange事件的處理函數，用來處理輸入文本倒計問題。
17.str=($tex.val().replace(/\w/g,"")).length，可以計算出輸入漢字的個數。
18.abcnum=$tex.val().length-str，可以計算出輸入内容除漢字外其他字元的個數。
19.total=str*2+abcnum，一個漢字相當于2個英文字元，這樣就換算成英文字元的長度。
20.if(str*2+abcnum<maxNum||str*2+abcnum==maxNum)，判斷目前輸入的長度是否小于等于規定的最大長度。
21.texts=Math.ceil((maxNum-(str*2+abcnum))/2)，計算出還可以輸入漢字的數量。
22.$("p").html("您還可以輸入的字數<span>"+texts+"</span>").children().css({"color":"blue"})，設定p元素中的文本内容，并設定文本的顔色。
23.else if(str*2+abcnum>maxNum)，如果超過規定長度。
24.texts=Math.ceil(((str*2+abcnum)-maxNum)/2)，計算出超出的個數。
25.$("p").html("您輸入的字數超過了<span>"+texts+"</span>").children("span").css({"color":"red"})，設定p元素中文本内容，并設定文本的顔色。
轉載于:https://www.cnblogs.com/momox/p/5090746.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)