資訊專欄INFORMATION COLUMN
摘要：經(jīng)過在網(wǎng)上的查找，找到了和兩個(gè)事件進(jìn)行一個(gè)開關(guān)判斷。關(guān)于事件是的標(biāo)準(zhǔn)事件，對(duì)于檢測(cè)和這幾個(gè)元素通過用戶界面發(fā)生的內(nèi)容變化非常有用，在內(nèi)容修改后立即被觸發(fā)，不像事件需要失去焦點(diǎn)才觸發(fā)。補(bǔ)充最近測(cè)試了下發(fā)現(xiàn)在事件之后才觸發(fā)。。。
事件背景
工作過程中涉及到了移動(dòng)端輸入內(nèi)容長(zhǎng)度的限定，這就要求需要對(duì)輸入過程中內(nèi)容的變化進(jìn)行監(jiān)控和判定，以決定是否可以繼續(xù)輸入，所以就想著是否可以在相關(guān)輸入處監(jiān)聽oninput事件？但是在手機(jī)端，中文輸入過程中，默認(rèn)輸入框里面會(huì)顯示相關(guān)的英文字母，這個(gè)時(shí)候會(huì)觸發(fā)oninput事件，但是這個(gè)時(shí)候輸入并沒有結(jié)束，所以導(dǎo)致判斷時(shí)機(jī)不正確。經(jīng)過在網(wǎng)上的查找，找到了compositionstart和compositionend兩個(gè)事件進(jìn)行一個(gè)開關(guān)判斷。關(guān)于oninput事件
oninput 是 HTML5 的標(biāo)準(zhǔn)事件，對(duì)于檢測(cè) textarea, input:text, input:password 和 input:search 這幾個(gè)元素通過用戶界面發(fā)生的內(nèi)容變化非常有用，在內(nèi)容修改后立即被觸發(fā)，不像 onchange 事件需要失去焦點(diǎn)才觸發(fā)。 oninput 事件兼容為ie9+, ie下可以onpropertychange事件，不是本節(jié)內(nèi)容。
compositionstart當(dāng)瀏覽器有非直接的文字輸入時(shí), compositionstart事件會(huì)以同步模式觸發(fā).
compositionend當(dāng)瀏覽器是直接的文字輸入時(shí), compositionend會(huì)以同步模式觸發(fā).
看了兩個(gè)事件就明白,開始中文輸入時(shí)會(huì)觸發(fā)compositionstart事件選詞結(jié)束后會(huì)觸發(fā)compositionend事件,忽略這兩個(gè)事件之間的input事件即可，為元素添加這個(gè)兩個(gè)事件，做一個(gè)開關(guān)，如下:
var node = document.querySelector("#sample");
var inputLock = false;
node.addEventListener("compositionstart", function(){
inputLock = true;
})
node.addEventListener("compositionend", function(){
inputLock = false;
})
node.addEventListener("input", function(){
if(!inputLock )
// do something for input limit
});
總結(jié)
通過上面上面兩個(gè)事件就可以解決移動(dòng)端中文輸入法觸發(fā)input事件的問題了。
2016/11/23補(bǔ)充最近測(cè)試了下發(fā)現(xiàn)：
compositionend 在 input 事件之后才觸發(fā) so。。。
于是只能在compositionend 里 也加上處理代碼
復(fù)制代碼
node.addEventListener("compositionstart", function(){
cpLock = true;
})
node.addEventListener("compositionend", function(){
cpLock = false;
if(!cpLock)console.log(this.value);
})
node.addEventListener("input", function(){
if(!cpLock)console.log(this.value);
});
感覺還是好坑，不能算是完美的解決這個(gè)問題，暫時(shí)只能先這樣處理填坑了，大家有好的方法麻煩留言告訴下:)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80933.html
摘要：簡(jiǎn)單點(diǎn)描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會(huì)觸發(fā)。在輸入中文或者語音等完畢或取消時(shí)，事件會(huì)觸發(fā)。在一段中文輸入完畢后卻并沒有在控制臺(tái)輸出任何數(shù)據(jù)。測(cè)試后發(fā)現(xiàn)事件是在事件之后觸發(fā)的。 在做搜索等功能時(shí)，很多時(shí)候我們需要實(shí)時(shí)獲取用戶輸入的值，而常常會(huì)得到類似 wm 這樣的拼音。為了解決這個(gè)問題，我在網(wǎng)上搜索了下相關(guān)問題，發(fā)現(xiàn)了兩個(gè)陌生的事件：compositio...
摘要：簡(jiǎn)單點(diǎn)描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會(huì)觸發(fā)。在輸入中文或者語音等完畢或取消時(shí)，事件會(huì)觸發(fā)。在一段中文輸入完畢后卻并沒有在控制臺(tái)輸出任何數(shù)據(jù)。測(cè)試后發(fā)現(xiàn)事件是在事件之后觸發(fā)的。 在做搜索等功能時(shí)，很多時(shí)候我們需要實(shí)時(shí)獲取用戶輸入的值，而常常會(huì)得到類似 wm 這樣的拼音。為了解決這個(gè)問題，我在網(wǎng)上搜索了下相關(guān)問題，發(fā)現(xiàn)了兩個(gè)陌生的事件：compositio...
摘要：在對(duì)文本綁定時(shí)，輸入數(shù)字字母特殊符號(hào)是都會(huì)觸發(fā)事件，但唯獨(dú)輸入中文時(shí)，事件是不會(huì)觸發(fā)的我覺得可以使用事件代替是的標(biāo)準(zhǔn)事件，對(duì)于檢測(cè)和這幾個(gè)元素通過用戶界面發(fā)生的內(nèi)容變化非常有用，在內(nèi)容修改后立即被觸發(fā)，不像事件需要失去焦點(diǎn)才觸發(fā)。 onKeypress事件會(huì)在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生。在對(duì)input文本綁定時(shí)，輸入數(shù)字、字母、特殊符號(hào)是都會(huì)觸發(fā)onKeypress事件，但唯獨(dú)輸...
閱讀 2612·2023-04-25 17:33
閱讀 681·2021-11-23 09:51
閱讀 2985·2021-07-30 15:32
閱讀 1437·2019-08-29 18:40
閱讀 1987·2019-08-28 18:19
閱讀 1501·2019-08-26 13:48
閱讀 2273·2019-08-23 16:48
閱讀 2308·2019-08-23 15:56
