关于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 text()要注意啦
Oct 30 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
第五章 php数组操作
2011/12/30 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
js实现tab切换效果
2017/02/16 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
python判断是空的实例分享
2020/07/06 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
合作协议书模板2014
2014/09/26 职场文书
小学大队长竞选稿
2015/11/20 职场文书
python基础之爬虫入门
2021/05/10 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js