首頁 > web前端 > js教程 > SJ即時監控文字方塊的輸入字元數的方法

SJ即時監控文字方塊的輸入字元數的方法

php中世界最好的语言
發布: 2018-04-13 11:57:46
原創
1517 人瀏覽過

這次帶給大家SJ即時監控文字方塊的輸入字元數的方法,SJ即時監控文字方塊的輸入字元數的注意事項有哪些,下面就是實戰案例,一起來看一下。

:即時監控文字輸入框的字數,並加以限制

# 1、即時監控目前輸入字數,直接使用onkeyup事件方法,為輸入框加上maxlength屬性限制長度。如:

<p>
  <textarea id="txt" maxlength="10"></textarea>
  <p><span id="txtNum">0</span>/10</p>
 </p>
登入後複製
var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
  txtNum.textContent = txt.value.length;
 })
登入後複製

此時已可以完成基本的監控功能,存在的問題:當輸入英文時正常,但輸入中文時,監控的數字會隨拼音長度而改變。

2、解決方法:

# compositionstart 事件觸發於一段文字的輸入之前(類似於keydown 事件,但該事件僅在若干可見字元的輸入之前,而這些可見字元的輸入可能需要一連串的鍵盤操作、語音識別或點選輸入法的備選詞)。

compositionend 是對應的就是一段文字輸入的事件。

這兩個屬性有點類似於“開關”,如:開始進行中文輸入的拼音時開關打開,不在改變監測得到的長度數值,完整輸入一個或是一串文字後,開關關閉,得到監測的數值長度。

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false;  //定义关闭的开关
 txt.addEventListener("keyup", function(){
  if(sw == false){
   countTxt();
  }
 });
 txt.addEventListener("compositionstart", function(){
  sw = true;
 });
 txt.addEventListener("compositionend", function(){
  sw = false;
  countTxt();
 });
 function countTxt(){  //计数函数
  if(sw == false){  //只有开关关闭时,才赋值
   txtNum.textContent = txt.value.length;
  }
 }
登入後複製

在vue中的寫法:

template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>
登入後複製

# data:

textContent: '',
conterNum: 0,
chnIpt: false,
登入後複製

## methods:

write() {
 let self = this;
 if (self.chnIpt == false) {
  self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:



#

以上是SJ即時監控文字方塊的輸入字元數的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板