js實(shí)時(shí)監(jiān)控文本框輸入字?jǐn)?shù)的實(shí)例代碼

發(fā)布時(shí)間：2020-09-25 20:13:57 來(lái)源：腳本之家閱讀：289 作者：kuke_kuke 欄目：web開(kāi)發(fā)

需求：實(shí)時(shí)監(jiān)控文本輸入框的字?jǐn)?shù)，并加以限制

1、實(shí)時(shí)監(jiān)控當(dāng)前輸入字?jǐn)?shù)，直接使用onkeyup事件方法，給輸入框加maxlength屬性限制長(zhǎng)度。如：

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

此時(shí)已可以完成基本的監(jiān)控功能，存在的問(wèn)題：當(dāng)輸入英文時(shí)正常，但輸入中文時(shí)，監(jiān)控的數(shù)字會(huì)隨拼音長(zhǎng)度而變化。

2、解決方法：

compositionstart 事件觸發(fā)于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見(jiàn)字符的輸入之前，而這些可見(jiàn)字符的輸入可能需要一連串的鍵盤操作、語(yǔ)音識(shí)別或者點(diǎn)擊輸入法的備選詞）。

compositionend 就是對(duì)應(yīng)的就是一段文字輸入的事件。

這兩個(gè)屬性有點(diǎn)類似于“開(kāi)關(guān)”，如：開(kāi)始進(jìn)行中文輸入的拼音時(shí)開(kāi)關(guān)打開(kāi)，不在改變監(jiān)測(cè)得到的長(zhǎng)度數(shù)值，完整輸入一個(gè)或是一串文字后，開(kāi)關(guān)關(guān)閉，得到監(jiān)測(cè)的數(shù)值長(zhǎng)度。

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false; //定義關(guān)閉的開(kāi)關(guān)
 txt.addEventListener("keyup", function(){
 if(sw == false){
  countTxt();
 }
 });
 txt.addEventListener("compositionstart", function(){
 sw = true;
 });
 txt.addEventListener("compositionend", function(){
 sw = false;
 countTxt();
 });
 function countTxt(){ //計(jì)數(shù)函數(shù)
 if(sw == false){ //只有開(kāi)關(guān)關(guān)閉時(shí)，才賦值
  txtNum.textContent = txt.value.length;
 }
 }

在vue中的寫(xiě)法：

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

以上這篇實(shí)時(shí)監(jiān)控文本框輸入字?jǐn)?shù)的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

js實(shí)時(shí)監(jiān)控文本框輸入字?jǐn)?shù)的實(shí)例代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽