JavaScript 输入框字数限制与回车键处理的输入法兼容方案

引言

前言

近期产品需求涉及多个输入框的开发，期望的交互逻辑为：支持中英文输入，实时显示已输入字符数，一旦超出预设限制，输入框边框变红并弹出提示信息。

该交互逻辑看似简单，技术实现上似乎也没有太多难点。然而，在实际开发过程中，当涉及中文输入法时，却遇到了意想不到的障碍。

具体遇到的障碍是什么？请继续阅读下文。

input事件监听的中文输入法陷阱

在实时监测输入框内容长度时，我们通常会遇到一些坑。常用的方法是使用 oninput 事件来进行监听。

采用 oninput 事件主要有以下两个优势：

它能够监听到用户通过右键复制粘贴操作改变输入框内容的情形；

该事件仅在输入框内容实际发生变化时触发。例如，当用户按下方向键、control 或 shift 等控制字符键时，此事件不会被触发；

在输入英文字符或数字时，该方案运行完美。甚至在用户进行 正常输入中文 的正常中文输入过程中，效果也表现良好。然而，当用户进行 非正常输入中文 的非正常中文输入时，就会出现 bug。所谓非正常输入，具体表现如下示例图所示：

从图中可以看出，在中文输入法的拼音输入状态下，用户尚未确定最终输入的汉字，仅输入了部分拼音。此时，input 事件已被触发，且监听到的输入框 value 值竟然是 d'd'd。这不仅包含了拼音字符，还包含了拼音之间的分隔点。假设输入框的内容长度限制为不超过5个字符，那么在截图所示的情况下，系统会提示用户 字符长度超过限制！。这种交互效果显然不符合产品设计初衷。

键盘事件(keydown/keyup/keypress)的局限性

另一种思路是使用 onkeydown、onkeypress 或 onkeyup 事件来进行监听。

这几个事件的缺点是无法监听通过右键复制粘贴而来的输入内容。那么，它们是否也会存在与 input 事件相同的问题呢？

经过多项实验发现，keydown 和 keyup 都会遇到与 input 相同的问题。然而，keypress 事件并没有这个问题。因为在中文输入状态下，keypress 事件不会触发。这不仅体现在输入拼音的过程中，即使在用户选中所需汉字（如“对对对”）后，该事件也不会触发。因此，当输入“对对对”导致内容超过字符限制时，无法给出 字符长度超过限制！ 的提示。

折中解决方案

折中解决方法

为了实现实时监测内容长度，同时保证在中文输入法状态下没有 bug，我进行了大量尝试，但最终发现难以两全其美（如果有哪位开发者找到了完美解决方案，请务必告知）。

因此，最终牺牲部分用户体验，采取了一种折中方案：在输入框失去焦点（即触发 blur 事件）时，或者用户输入回车键时，才进行内容长度的检测。当然，如果发现输入框内容超过限制，需要将光标保留在输入框内，以便用户进行修改。

一提到 用户输入回车键时才进行内容长度的检测，就不得不谈谈之前遇到的另一个坑。

回车键检测的中文输入法兼容性问题

如何在输入框中检测用户输入了回车键？

这是一个非常常见的交互场景，例如在修改名称时支持用户输入回车后直接保存，或在登录时支持用户输入回车后直接登录。但其中有一个需要小心的坑点：**中文输入法下按回车键来输入英文字符**。

以下是一个中文输入法下按回车键来输入英文字符的过程举例：

例如，我要输入账号进行登录，账号全为英文字符。当前处于中文输入法状态，但为了省事未切换输入法，直接敲击了账号（全英文字符）。此时搜狗输入法提示了一大串中文候选词，随后我按下了回车键，输入框中便输入了我想要的英文字符。

在这种情况下，虽然用户按下了回车键，但其目的仅是在中文输入法下输入英文字符，而非触发我们想要监听的回车操作。那么，如何排除这种情况下的回车键呢？

通常，监听回车键我们会使用 keydown 事件或者 keyup 事件，实现代码如下所示。那么，这两种方法是否都能过滤掉我们不想监听的回车键呢？

//方法一：使用 keydown 事件
input.onkeydown = function(e){
 if(e.keyCode == 13){
  //用户输入的是回车键
  //做相关操作
 }
}
//方法二：使用 keyup 事件
input.onkeyup = function(e){
 if(e.keyCode == 13){
  //用户输入的是回车键
  //做相关操作
 }
}

经过试验发现：使用 keydown 是可以成功过滤的，但使用 keyup 不能。

那么，我们来看看原因是什么？

这是因为在 keydown 事件中：在中文输入法状态下输入的回车键，检测到的 keyCode 值为 229，而不是 13；而单纯输入一个回车键时，keyCode 的值才是 13。

而在 keyup 事件中：在中文输入法状态下输入的回车键，检测到的 keyCode 值为 13；而单纯输入一个回车键时，keyCode 的值也是 13。

下图是我打印在 console 中的结果：(代码示例见这里)

总结

结语

关于输入框涉及到的几个事件：keydown、keyup、keypress、input 和 change。

查看这里：https://www.jb51.net/article/21237.htm