阻止中文輸入法輸入拼音的時候觸發(fā)input事件

前言

最近看element-ui源碼的時候看到el-input發(fā)現(xiàn)的。這個少見的事件。

compositionstart、compositionend事件（MDN解釋)

compositionstart事件觸發(fā)于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。
當文本段落的組成完成或取消時, compositionend 事件將被觸發(fā) (具有特殊字符的觸發(fā), 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)。

/*** @param {Element} elem input元素* @param {Function} callback input事件綁定的回調(diào)*/ function inputEvent(elem, callback) {let isOnComposition = false;elem.addEventListener('compositionstart', function(event) {isOnComposition = true;})elem.addEventListener('compositionend', function(event) {isOnComposition = false;const val = event.target.value;handleInput(val);})elem.addEventListener('input', function(event) {const val = event.target.value;handleInput(val);})function handleInput(val) {if (isOnComposition) return;callback(val);} }window.onload = function() {const input = document.getElementById("input");inputEvent(input, function(val) {console.log(val);}) }

總結(jié)

以上是生活随笔為你收集整理的阻止中文输入法输入拼音的时候触发input事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。