即時監控文字框輸入字數的執行個體代碼，文字框執行個體

即時監控文字框輸入字數的執行個體代碼，文字框執行個體

需求：即時監控文本輸入框的字數，並加以限制

1、即時監控當前輸入字數，直接使用onkeyup事件方法，給輸入框加maxlength屬性限制長度。如：

<div>  <textarea id="txt" maxlength="10"></textarea>  <p><span id="txtNum">0</span>/10</p> </div>

var txt = document.getElementById("txt"); var txtNum = document.getElementById("txtNum"); txt.addEventListener("keyup", function(){  txtNum.textContent = txt.value.length; })

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

2、解決方案：

compositionstart 事件觸發於一段文字的輸入之前（類似於 keydown 事件，但是該事件僅在若干可見字元的輸入之前，而這些可見字元的輸入可能需要一連串的鍵盤操作、語音辨識或者點擊IME的備選詞）。

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();}

以上這篇即時監控文字框輸入字數的執行個體代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。