在js中如何實現監控文字方塊輸入字數（詳細教學）

下面我就為大家分享一篇即時監控文字方塊輸入字數的實例程式碼，具有很好的參考價值，希望對大家有幫助。

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

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用axios封裝fetch方法和呼叫

#在JS中Map和ForEach的差異有哪些？

#########在vue中如何實作頁面載入進度條元件#############javascript該如何實現取得日期段內每天不同的價格#### ########在vue中如何實作圖片loading元件############為什麼Node.js會成為網頁應用程式開發？ ############在javascript中如何實作最長公共子序列######

以上是在js中如何實現監控文字方塊輸入字數（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！