关于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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
原生JS实现留言板功能
Feb 08 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python 实现两个npy档案合并
2020/07/01 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
季度思想汇报
2014/01/01 职场文书
仓库主管岗位职责
2014/03/02 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
PyTorch的Debug指南
2021/05/07 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js