Unikey输入法干扰数字输入验证的问题及可行解决方案咨询

最近遇到个挺头疼的兼容性问题，想请大家帮忙出出主意：

我写了一个限制输入框仅能输入数字的JavaScript函数，但用户开启越南语输入法Unikey时就会出bug——当用户连续输入两次d，Unikey会自动把它转换成越南字符đ，但因为我的验证逻辑会拦截非数字字符，结果就只剩输入法触发的删除操作，把输入框里已有的数字给删掉了。

最初的数字验证实现 #

先给大家看看我最开始写的代码，核心是通过监听keydown和paste事件来拦截非数字输入：

window.addNumericInputValidation = function (elementId) {
  var $element = $("#" + elementId);
  // 先移除已有的事件处理器，避免重复绑定
  $element.off("keydown.numericValidation");
  $element.off("paste.numericValidation");

  // 处理键盘输入事件
  $element.on("keydown.numericValidation", function (e) {
    console.log("key code", e.keyCode);
    // 允许一些控制键：退格、删除、制表、ESC、回车等
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
      // 允许Ctrl/Command+A/C/V/X这类快捷键
      (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
      (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
      (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
      (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
      // 允许方向键和home/end
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      return;
    }
    // 仅允许数字按键，否则阻止输入
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
  });

  // 处理粘贴事件
  $element.on("paste.numericValidation", function (e) {
    // 通过剪贴板API获取粘贴内容
    var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
    // 仅允许粘贴纯数字内容
    if (!/^\d*$/.test(pastedData)) {
      e.preventDefault();
    }
  });
};

问题根源 #

我调试后发现，开启Unikey输入两次d时，输入法会触发一串按键事件：
68(对应d) → 231(对应đ) → 8(退格键)×2 → 231(对应đ)
我的代码拦截了非数字的231按键，但退格键没被拦截，结果就把输入框里之前输入的数字给删掉了。

第一次优化尝试：适配标准IME事件 #

我查了资料，知道正规的输入法会触发compositionstart/compositionend事件来标记输入法组合输入的开始和结束，于是我重构了代码，想通过这些事件来避开输入法活跃时的验证：

window.addNumericInputValidation = function (elementId) {
  var $element = $("#" + elementId);
  // 移除已有的事件处理器
  $element.off(".numericValidation");

  // 标记是否处于输入法组合输入状态
  var inComposition = false;
  // 记录组合输入开始前的输入框值
  var valueBeforeComposition = $element.val();

  // 处理组合输入开始事件
  $element.on("compositionstart.numericValidation", function (e) {
    inComposition = true;
    valueBeforeComposition = $element.val();
  });

  // 处理组合输入结束事件
  $element.on("compositionend.numericValidation", function (e) {
    inComposition = false;
    // 组合输入结束后，过滤掉非数字内容
    setTimeout(function () {
      var currentValue = $element.val();
      var numericValue = currentValue.replace(/\D/g, '');
      if (currentValue !== numericValue) {
        $element.val(numericValue);
      }
    }, 0);
  });

  // 用input事件作为兜底验证
  $element.on("input.numericValidation", function (e) {
    // 非组合输入状态下，实时过滤非数字内容
    if (!inComposition) {
      var currentValue = $element.val();
      var numericValue = currentValue.replace(/\D/g, '');
      if (currentValue !== numericValue) {
        $element.val(numericValue);
      }
    }
  });

  // 粘贴事件逻辑保持不变
  $element.on("paste.numericValidation", function (e) {
    var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
    if (!/^\d*$/.test(pastedData)) {
      e.preventDefault();
    }
  });
};

可惜的是，Unikey并不触发标准的compositionstart/compositionend事件，这个优化方案完全不起作用。

临时的hack方案 #

无奈之下，我只能针对Unikey的特定行为做了硬编码兼容：它在生成đ之前，会先触发一个keyCode为231且key为·的事件，然后跟着两次退格键。我加了一个计数器来跳过这两次自动触发的删除操作：

var unikeyBackspace = 0;
$element.on("keydown.numericValidation", function (e) {
  // 捕获Unikey生成的特殊前置按键
  if (e.originalEvent.keyCode == 231 && e.originalEvent.key == "·") {
    unikeyBackspace = 2;
  }
  // 跳过Unikey自动触发的退格操作
  if (e.originalEvent.key == "Backspace" && unikeyBackspace > 0) {
    unikeyBackspace--;
    e.preventDefault();
  }
});

但这个方案实在太不优雅了，完全依赖Unikey的特定实现，哪天输入法更新了逻辑，这个代码就废了。

想请教大家的问题 #

我总不能要求用户关掉Unikey来用我的输入框吧？所以想问问有没有更靠谱的解决方案：

• 有没有办法准确检测Unikey这类不触发标准IME事件的输入法？
• 有没有其他实现数字输入限制的思路，能从根源上避开这类输入法冲突？

内容来源于stack exchange