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