阻止中文輸入法輸入拼音的時候觸發input事件
前言
最近看element-ui源碼的時候看到el-input發現的。這個少見的事件。
compositionstart、compositionend事件（MDN解釋)
compositionstart事件觸發于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。
當文本段落的組成完成或取消時, compositionend 事件將被觸發 (具有特殊字符的觸發, 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)。
/*** @param {Element} elem input元素* @param {Function} callback input事件綁定的回調*/
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);})
}
)