媒介
近来产物需要做不少输入框，产物想要的交互效果是：用户能够输入中英文，跟着用户输入能及时显现已输入的字符个数，当凌驾数目限定时输入框边框变红，同时给用户提醒信息。
这交互听起来没啥题目，手艺完成上好像也没啥难点。然则当我完成出来今后碰到中文输入法就有坑了。
怎样个坑呢，且看下文~~
PS： 本文一切实验相干代码都在 jsbin 中：https://jsbin.com/bolugo/edit…，人人能够接见此链接自行举行实验。
及时监测输入框内容长度所碰到的坑
运用 oninput事宜来监听
运用这个oninput事宜的优点有2个：
当用户经由历程右键复制转变输入框内容时，能够监听到；
只要在输入框内容发生变化时才会触发此事宜，比方用户按下方向键、
control/shift等这些控制字符键时此事宜是不会触发的；
当你输入英文字符或许数字时效果圆满，以至在你一般输入中文时也效果圆满。但当你非一般输入中文时就涌现 bug 了。非一般输入是怎样的呢？看下面这张示例图：
看到了吗，在这类中文输入体式格局下，实在用户还没有输入他想输入的中文，只是输入了几个拼音，但 input 事宜被触发了，而且监听到的输入框value居然是d'd'd，不单单是拼音字符，还包含了分开的点。假如输入框内容长度被限定为不凌驾5，那末在截图这类情况下，就会提醒用户字符长度凌驾限定！。如许的交互效果固然不是产物想要的。
运用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 的更多引见，我零丁再写一篇博客再讲吧~~~
