记录踩的一个有关中文输入法的坑

Nov 28, 2019

最近踩了一个坑，是关于中文输入法的，想记录一下。

TL;DR

怪异行为：在手机端，调用中文输入法的数字键盘，输入数字时，所返回的 keyCode 为 229。

产生原因：

If an Input Method Editor is processing key input and the event is keydown, return 229.

解决方法： 因为 ASCII 是 unicode 的子集，所以可以巧妙利用 charCodeAt 方法得到正确的 keyCode 值

1

  <input id="foo" type="text" maxlength="6" />

|

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

$('#foo').on('keyup', function (e) {
  // 输入其他字符，直接清空
  if (this.value && !/^\\d$/.test(this.value[this.value.length - 1]) &&) {
      this.value = this.value.replace(/\\D/g, '')
      return false
  } else if (e.keyCode === 229) {
      // 处理中文输入法出现 keyCode 为 229 情况
      e.keyCode = this.value.charCodeAt(this.value.length - 1)
  }
 // 键盘上的数字键按下才可以输入
  if (e.keyCode == 8 ||
     (e.keyCode >= 48 && e.keyCode <= 57) ||
     (e.keyCode >= 96 && e.keyCode <= 105)) {
     // do something...
  }

TIL:

  1. charCodeAt 方法返回 unicode 码点
  2. KeyboardEvent.keyCode 已废弃，推荐使用 KeyboardEvent.code
  3. Gboard 输入法在 type="password" 的输入框会自动关闭中文输入法
  4. 事件顺序：keydown->keypress->keyup

References:

规范链接