html 输入字数限制,说一说限制字数的输入框踩的坑

前言

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

这交互听起来没啥问题，技术实现上似乎也没啥难点。但是当我实现出来以后遇到中文输入法就有坑了。

怎么个坑呢，且看下文~~

PS： 本文所有实验相关代码都在 jsbin 中：https://jsbin.com/bolugo/edit...，大家可以访问此链接自行进行实验。

实时监测输入框内容长度所遇到的坑

使用 oninput事件来监听

使用这个oninput事件的好处有2个：

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

只有在输入框内容发生变化时才会触发此事件，比如用户按下方向键、control/shift 等这些控制字符键时此事件是不会触发的；

当你输入英文字符或者数字时效果完美，甚至在你正常输入中文时也效果完美。但当你非正常输入中文时就出现 bug 了。非正常输入是怎样的呢？看下面这张示例图：

看到了吗，在这种中文输入方式下，其实用户还没有输入他想输入的中文，只是输入了几个拼音，但 input 事件被触发了，而且监听到的输入框value居然是d'd'd，不单单是拼音字符，还包括了分隔的点。假如输入框内容长度被限制为不超过