溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求：實時監控文本輸入框的字數，并加以限制
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 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。
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();
}
以上這篇實時監控文本框輸入字數的實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
