jQuery composition事件返回undefined 适配日文IME输入法输入校验

为什么composition事件中无法获取keyCode #

compositionupdate 属于输入法合成类事件，对应输入内容还处在输入法候选处理阶段，不属于直接的单按键输入场景，W3C标准中该事件对象本身就没有定义keyCode属性，所以无法通过该途径获取按键编码，不需要在这个方向上做尝试。

适配Microsoft IME Japanese Keyboard的校验方案 #

针对IME输入法场景下的输入校验，推荐使用以下两种兼容性较高的实现方案：

方案1：合成状态标记 + input事件过滤（全场景兼容） #

该方案通过标记输入法合成状态，在输入完成后统一做内容过滤，兼容包括IE在内的所有主流浏览器：

jQuery(document).ready(function() {
  let isComposing = false;
  const $nameInput = jQuery(".txtOnly");

  // 输入法合成开始，标记状态
  $nameInput.on('compositionstart', function() {
    isComposing = true;
  });

  // 输入法合成结束，取消标记并执行校验
  $nameInput.on('compositionend', function() {
    isComposing = false;
    filterValidChar($(this));
  });

  // 非合成状态下实时校验输入内容
  $nameInput.on('input', function() {
    if (!isComposing) {
      filterValidChar($(this));
    }
  });

  // 非法字符过滤函数
  function filterValidChar($ele) {
    // 白名单规则可按需调整，当前规则允许大小写英文字母、中文、日文平假名/片假名
    const validValue = $ele.val().replace(/[^a-zA-Z\u4e00-\u9fa5\u3040-\u309F\u30A0-\u30FF]/g, '');
    if ($ele.val() !== validValue) {
      $ele.val(validValue);
    }
  }
});

方案2：beforeinput事件实时拦截（现代浏览器兼容） #

如果不需要兼容IE浏览器，可以使用beforeinput事件直接拦截非法输入，不需要事后替换内容，体验更流畅：

jQuery(document).ready(function() {
  jQuery(".txtOnly").on('beforeinput', function(e) {
    // 仅校验文本插入类操作，跳过删除、回车等控制操作
    if (e.inputType !== 'insertText' && e.inputType !== 'insertCompositionText') return;
    // 校验输入内容是否包含非法字符
    const hasInvalidChar = /[^a-zA-Z\u4e00-\u9fa5\u3040-\u309F\u30A0-\u30FF]/.test(e.data);
    if (hasInvalidChar) {
      e.preventDefault();
    }
  });
});

两种方案都可以完美适配Microsoft IME Japanese Keyboard的输入场景，不会出现原keypress方案拦截失效的问题。

内容的提问来源于stack exchange，提问作者wplearner