文字框輸入文字倒計詳解

admin發表於2018-11-17

通常情況下，文字框輸入的文字個數並不是無限制的，一般都會限定一個輸入最高上限，較為人性化的網站可能會有可輸入字數倒計效果，比如還剩餘20可以輸入這樣的提示，下面就通過一個例項介紹一下如何實現此效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!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 src="http://libs.baidu.com/jquery/1.9.0/jquery.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(){})，文件結構載入完畢再去執行函式中的程式碼。

（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].oninput=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元素中文字內容，並設定文字的顏色。

相關文章