序

最近产品中需要做很多输入框。产品想要的交互效果是用户可以同时输入中文和英文，已经输入的字符数可以随着用户输入实时显示。超过数量限制时，输入框边框变红，同时提示用户信息。

这种交互听起来不是问题，在技术实现上似乎也没有什么困难。然而，当我意识到的时候，遇到了中文输入法有一个坑。

好一个坑，看看下面~ ~

实时监控输入框内容长度时遇到的坑由oninput事件监控

使用此oninput事件有两个好处：

当用户通过右键复制改变输入框内容时，可以听到；

只有当输入框的内容发生变化时，才会触发此事件。例如，当用户按下方向键、控制/shift等控制字符键时，不会触发该事件；

当你输入英文字符或数字时，即使你正常输入中文，效果也是完美的。但是当你异常输入中文的时候，bug就出现了。什么是异常输入？请看下面的例子：

看，在这种中文输入模式下，其实用户还没有输入他想输入的中文，只是输入了几个拼音，但是触发了输入事件，监控到的输入框值实际上是d'd，不仅仅是拼音字符，还包括了分隔点。如果输入框的内容长度限制为不超过5，在截图的情况下会提示用户字符长度超出限制！这种互动效果肯定不是产品想要的。

使用onkeydown/onkeypress/onkeyup事件来侦听

这些事件的缺点是听不到右键复制的输入内容，但会不会出现和输入事件一样的问题？

我做过几次实验，发现keydown和keyup都有和输入一样的问题，但是keypress没有这个问题，因为在中文输入状态下，keypress是不会触发的，不仅是输入拼音的时候，在选择想要输入的中文的时候，比如“对对对”。然后，输入“对对对”后，虽然超出了字符限制，但不能给出字符长度超出限制！提示。

折中的解决办法

为了实时监控内容长度，保证中文输入法状态没有bug，我纠结了很久，终于发现臣妾做不到！如果有英雄发现，请告诉我。

所以说到底，以牺牲用户体验为代价，找到了一个折中的办法：当输入框失焦(模糊)时，或者用户输入回车键时，检测到内容长度。当然，如果你发现输入框的内容超出了限制，你应该把光标留在输入框中，方便用户修改。

哎，说到用户输入回车键时内容长度的检测，就要说说之前种的坑了

如何检测输入框中的回车键

其实这是一种很常见的互动。比如修改名称时，输入回车后可以直接保存，登录时输入回车后可以直接登录。但是要小心的坑是：*按回车键在中文输入法中输入英文字符* *。

中文输入法按回车键输入英文字符过程举例；

比如我想输入我的账号登录。我的账号全是英文的。我目前是中文输入法，但是懒得切换输入法，所以直接敲了我的账号(全是英文字符)。这时候搜狗输入法给了我一堆汉字，然后我按了Enter，我在输入框里输入了我想要的英文字符。

在这种情况下，虽然用户已经输入了回车键，但用户只希望通过按回车键在中文输入法下输入英文字符，而这个回车键并不是我们要监控的回车键。那么在这种情况下如何排除回车键呢？

一般来说，我们会用keydown事件或者keydown事件来监控回车键，实现代码如下。那么这两种方法可以过滤掉我们不想听的回车键吗？

//方法1:使用按键事件输入。onkeydown=function(e){ if(e . key code==13){//用户输入回车键//做相关操作} }//方法2:使用keyup事件输入。onkey up=function(e){ if(e . key code===。

通过实验发现，keydown可以成功过滤，而keydown则不能。

让我们看看为什么。

是因为在按键事件中：在中文输入法状态下输入的回车键，检测到的键码是229而不是13；当您简单地输入回车时，键码是13。

在按键事件中，对于中文输入法状态下输入的回车键，检测到的键码为13；当您简单地输入回车时，键码也是13。

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

标签

输入框中涉及的几个事件：向下键/向上键/按键/输入/更改

点击此处：//www . JB 51 . net/article/21237 . htm。