第 80 期(W3C 标准-JavaScript-事件)：InputEvent.inputType

在第 51 期(W3C 标准-JavaScript-事件)：复合事件中我们了解了复合事件，并利用复合事件解决了在文本框中输入中文时的提前上屏问题。本期要介绍的是 input 事件里的 inputType 属性，利用它也可以解决上面那个问题。

写过表单相关代码的同学应该对 input 事件不陌生，我们可以在 input 事件的回调函数里对输入内容进行即时处理，它的 event 参数有个 inputType 属性，会返回当前输入的类型：

insertText 键盘直接输入的
insertFromPaste 通过粘贴进来的
insertCompositionText 通过 IME 输入的
insertFromDrop 通过拖放进来的
deleteContentBackward 回退删除（按 backspace 键）
deleteContentForward 前向删除（按 delete 键）
deleteByCut 剪切删除（选中文本按 ctrl + X）

更多类型请参阅：https://www.w3.org/TR/input-events-1/

有了输入类型我们就可以准确判断输入来源并做相应的处理了。下面我们利用这个特性来解决上面那个中文输入时提前上屏的问题：

<input type="text" id="input">
<p id="result"></p>

var input = document.getElementById('input');
var result = document.getElementById('result');

input.addEventListener('input', function(e) {
  const inputType = e.inputType;

  if (inputType !== 'insertCompositionText') {
    output(this.value);
  }
});

input.addEventListener('compositionend', function() {
  output(this.value);
});

function output(value) {
  result.innerHTML = value;
}

fezaoduke / fe-practice-hard

第 80 期(W3C 标准-JavaScript-事件)：InputEvent.inputType #83