[b]前言[/b] 最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。 这交互听起来没啥问题，技术实现上似乎也没啥难点。但是当我实现出来以后遇到中文输入法就有坑了。 怎么个坑呢，且看下文~~ [b]实时监测输入框内容长度所遇到的坑使用 [code]oninput[/code]事件来监听[/b] 使用这个[code]oninput[/code]事件的好处有2个： 当用户通过右键复制改变输入框内容时，可以监听到； 只有在输入框内容发生变化时才会触发此事件，比如用户按下方向键、[code]control[/code]/[code]shift[/code] 等这些控制字符键时此事件是不会触发的； 当你输入英文字符或者数字时效果完美，甚至在你[code]正常输入中文[/code]时也效果完美。但当你[code]非正常输入中文[/code]时就出现 bug 了。非正常输入是怎样的呢？看下面这张示例图： [img]http://files.jb51.net/file_images/article/201608/201608141005411.png[/img] 看到了吗，在这种中文输入方式下，其实用户还没有输入他想输入的中文，只是输入了几个拼音，但 [code]input[/code] 事件被触发了，而且监听到的输入框[code]value[/code]居然是[code]d'd'd[/code]，不单单是拼音字符，还包括了分隔的点。假如输入框内容长度被限制为不超过5，那么在截图这种情况下，就会提示用户[code]字符长度超过限制！[/code]。这样的交互效果当然不是产品想要的。 [b]使用[code]onkeydown[/code]/[code]onkeypress[/code]/[code]onkeyup[/code]事件来监听[/b] 这几个事件的缺点是无法监听右键复制而来的输入内容，但是否也会存在与[code]input[/code]事件一样的问题呢？ 我做了几个实验，发现[code]keydown[/code]、[code]keyup[/code]都会遇到和 [code]input[/code]一样的问题，但[code]keypress[/code]没有这个问题，因为在中文输入状态下，[code]keypress[/code]不会触发，不单是你输入拼音的过程中不会触发，等你选中所要输入的中文如“对对对”后也不会触发。那么当输入“对对对”后虽然超过了字符限制但无法给出[code]字符长度超过限制！[/code]的提示。 [b]折中解决方法[/b] 要想做到实时监测内容长度，又想保证中文输入法状态下没有 bug，我折腾了好久最后发现 臣妾做不到呀！（要是哪位豪杰找到了，一定要告诉我呀~~）。 所以最后牺牲了下用户体验，找到了一个折中的方式：输入框失去焦点时（即[code]blur[/code]），或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制，要将光标停留在输入框内，方便用户进行修改。 哎，一说到[code]用户输入回车键时才进行内容长度的检测[/code]又得说说以前栽的坑了 [b]输入框中如何检测输入了回车键[/b] 其实这是一个很常见的交互，比如修改名称时支持用户输入回车后直接保存、登录时支持用户输入回车后直接登录。但其中要小心的坑是：[code]**中文输入法下按回车键来输入英文字符**[/code]。 [quote] 中文输入法下按回车键来输入英文字符的过程举例： 比如我要输入账号进行登录，我的账号是全英文的，我当前处于中文输入法，但我懒得切换输入法，于是我就直接敲了我的账号（全英文字符），这时搜狗输入法给我提示了一大串中文，然后我按了个回车，输入框就输入了我想要的英文字符。 [/quote] 在这种情况下，用户虽然输入了回车键，但用户按下回车键只是想在中文输入法下输入英文字符而已，这个回车键并不是我们想要监听的回车键。那么怎么排除这种情况下的回车键呢？ 一般来说监听回车键我们会用[code]keydown[/code]事件或者[code]keyup[/code]事件，实现代码如下所示。那么是否这两种方法都能过滤掉我们不想监听的回车键呢？ 经过试验发现：使用[code]keydown[/code]是可以成功过滤的，但使用[code]keyup[/code]不能。 那么我们来看看为什么？ 是因为在[code]keydown[/code]事件中：中文输入法状态下输入的回车键，检测的 [code]keyCode[/code]为 [code]229[/code] 而不是[code]13[/code]；单纯输入一个回车时，[code]keyCode[/code]才是[code]13[/code]。 而在[code]keyup[/code]事件中：中文输入法状态下输入的回车键，检测的 [code]keyCode[/code]是[code]13[/code]；单纯输入一个回车时，[code]keyCode[/code]也是[code]13[/code]。 下图是我打印在 console 中的结果：(代码示例见这里) [img]http://files.jb51.net/file_images/article/201608/201608141005422.png[/img] [b]结语[/b] 关于输入框涉及到的几个事件：keydown/keyup/keypress/input/change 查看这里：[url=http://www.1sucai.cn/article/21237.htm]http://www.1sucai.cn/article/21237.htm[/url]