最近产品须要作很多输入框,产品想要的交互效果是:用户能够输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息。javascript
这交互听起来没啥问题,技术实现上彷佛也没啥难点。可是当我实现出来之后遇到中文输入法就有坑了。html
怎么个坑呢,且看下文~~java
PS: 本文全部实验相关代码都在 jsbin 中:https://jsbin.com/bolugo/edit...,你们能够访问此连接自行进行实验。spa
oninput
事件来监听使用这个oninput
事件的好处有2个:code
当用户经过右键复制改变输入框内容时,能够监听到;htm
只有在输入框内容发生变化时才会触发此事件,好比用户按下方向键、control
/shift
等这些控制字符键时此事件是不会触发的;blog
当你输入英文字符或者数字时效果完美,甚至在你正常输入中文
时也效果完美。但当你非正常输入中文
时就出现 bug 了。非正常输入是怎样的呢?看下面这张示例图:事件
看到了吗,在这种中文输入方式下,其实用户尚未输入他想输入的中文,只是输入了几个拼音,但 input
事件被触发了,并且监听到的输入框value
竟然是d'd'd
,不仅仅是拼音字符,还包括了分隔的点。假如输入框内容长度被限制为不超过5,那么在截图这种状况下,就会提示用户字符长度超过限制!
。这样的交互效果固然不是产品想要的。图片
onkeydown
/onkeypress
/onkeyup
事件来监听这几个事件的缺点是没法监听右键复制而来的输入内容,可是否也会存在与input
事件同样的问题呢?ip
我作了几个实验,发现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
的更多介绍,我单独再写一篇博客再讲吧~~~