阻止中文输入法输入拼音的时候触发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);})
}