关于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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
理解jQuery stop()方法
Nov 21 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
让你30分钟快速掌握vue3教程
Oct 26 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写的serv-u的web申请账号的程序
2006/10/09 PHP
php缓冲输出实例分析
2015/01/05 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python微信公众号开发简单流程实现
2020/03/09 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
优秀党员转正的自我评价
2013/10/06 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
党员干部承诺书范文
2014/03/25 职场文书
爱晚亭导游词
2015/02/09 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
浅谈Redis的几个过期策略
2021/05/27 Redis
Python字符串格式化方式
2022/04/07 Python