文字框文字輸入數量倒計效果

admin發表於2018-05-23
很多比較人性化的文字框都有這樣的效果，那就是文字框對輸入的文字具有數量顯示，並且當在輸入的時候能夠顯示還有多少剩餘字元可以輸入，如果超出長度，那麼就會自動刪除超出的，下面就通過一個例項簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#content {
  width: 700px;
  height: 100px;
  border: 1px #CCCCCC dashed;
  padding: 10px;
}
#show {
  font-size: 14px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
#sid {
  font-size: 22px;
  font-weight: bold;
  color: #009900;
  font-style: italic;
}
#description {
  margin: 0px auto;
  width: 400px;
  font-size: 14px;
}
#softwhy a {
  text-decoration: underline;
  color: red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="mytest/jQuery/manhuaInputLetter.1.0.js"></script>
<script type="text/javascript">
 $(function () {
  $("#content").manhuaInputLetter({
    len: 50,//限制輸入的字元個數
    showId: "sid"//顯示剩餘字元文字標籤的ID
  });
});
</script>
</head>
<body>
  <div style="margin:100px auto; width:800px;">
    <textarea id="content"></textarea>
    <p id="show">
      您還可以輸入：
      <label id="sid"></label>
    </p>
  </div>
</body>
</html>

以上程式碼實現了想要的功能，下面就簡單介紹一下如何實現此效果：

一.程式碼註釋：

（1）.$(function (){}，當文件結構完全載入完畢再去執行函式。

（2）.$("#content").manhuaInputLetter({}），呼叫manhuaInputLetter函式，並且傳遞一個物件直接量作為引數，規定了字數和顯示倒計數字元素的id值。

（3）.$.fn.manhuaInputLetter=function(options){}，為jQuery物件新增新的方法。

（4）.var defaults={}，宣告一個物件直接量，這裡設定了預設的輸入字數和顯示倒記數字元素的id屬性值。

（5）.var options=$.extend(defaults,options)，使用options物件來擴充套件defaults物件，前者的屬性值會被後者的同名屬性覆蓋。

（6）.var $input=$(this)，獲取<textarea>物件。

（7）.var $show=$("#"+options.showId)，獲取顯示倒記數字元素物件。

（8）.$show.html(options.len)，輸出允許輸入的最大字數。

（9）.$input.on("keydown keyup blur",function(e){}，為<textarea>物件繫結三個滑鼠事件處理函式。

（10）.var content=$(this).val()，獲取<textarea>物件的值。

（11）.var length=content.length，獲取<textarea>物件值的長度。

（12）.var result=options.len-length，計算出剩餘的字數。

（13）.if(result>=0){}判斷剩餘的字數是否大於零，如果大於零，則在指定元素輸出剩餘的字數，否則使用$(this).val(content.substring(0,options.len))擷取指定長度的字串。

二.相關閱讀：

（1）.$.fn參閱$.fn作用簡單介紹一章節。

（2）.$.extend參閱$.extend()和$.fn.extend()用法一章節。

（3）.html()參閱jQuery html()一章節。

（4）.val()參閱jQuery val()一章節。

相關文章