关于JavaScript限制字数的输入框的那些事


Posted in Javascript onAugust 14, 2016

前言

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

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

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

实时监测输入框内容长度所遇到的坑使用 oninput事件来监听

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

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

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

当你输入英文字符或者数字时效果完美,甚至在你正常输入中文时也效果完美。但当你非正常输入中文时就出现 bug 了。非正常输入是怎样的呢?看下面这张示例图:
关于JavaScript限制字数的输入框的那些事

看到了吗,在这种中文输入方式下,其实用户还没有输入他想输入的中文,只是输入了几个拼音,但 input 事件被触发了,而且监听到的输入框value居然是d'd'd,不单单是拼音字符,还包括了分隔的点。假如输入框内容长度被限制为不超过5,那么在截图这种情况下,就会提示用户字符长度超过限制!。这样的交互效果当然不是产品想要的。

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

这几个事件的缺点是无法监听右键复制而来的输入内容,但是否也会存在与input事件一样的问题呢?

我做了几个实验,发现keydownkeyup都会遇到和 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事件中:中文输入法状态下输入的回车键,检测的 keyCode229 而不是13;单纯输入一个回车时,keyCode才是13

而在keyup事件中:中文输入法状态下输入的回车键,检测的 keyCode13;单纯输入一个回车时,keyCode也是13

下图是我打印在 console 中的结果:(代码示例见这里)

关于JavaScript限制字数的输入框的那些事

结语

关于输入框涉及到的几个事件:keydown/keyup/keypress/input/change

查看这里:https://3water.com/article/21237.htm

Javascript 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 #Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 #Javascript
漂亮! js实现颜色渐变效果
Aug 12 #Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 #Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 #Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 #Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
You might like
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
js实现扫雷源代码
2020/11/27 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Python如何解除一个装饰器
2020/08/07 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
销售求职信范文
2014/05/26 职场文书
合作意向协议书
2015/01/29 职场文书
聚会通知怎么写
2015/04/23 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python