位置: 编程技术 - 正文

关于JavaScript限制字数的输入框的那些事(js限制数组长度)

编辑:rootadmin

推荐整理分享关于JavaScript限制字数的输入框的那些事(js限制数组长度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:关于js的描述错误的是,以下关于js函数说法错误的是,关于javascript的说法,下列关于javascript的叙述正确的有,下列关于javascript的叙述正确的有,关于javascript的说法,关于javascript的说法,关于javascript的说法,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

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

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

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

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

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

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

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

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

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

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

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

我做了几个实验,发现keydown、keyup都会遇到和 input一样的问题,但keypress没有这个问题,因为在中文输入状态下,keypress不会触发,不单是你输入拼音的过程中不会触发,等你选中所要输入的中文如“对对对”后也不会触发。那么当输入“对对对”后虽然超过了字符限制但无法给出字符长度超过限制!的提示。

折中解决方法

要想做到实时监测内容长度,又想保证中文输入法状态下没有 bug,我折腾了好久最后发现 臣妾做不到呀!(要是哪位豪杰找到了,一定要告诉我呀~~)。

关于JavaScript限制字数的输入框的那些事(js限制数组长度)

所以最后牺牲了下用户体验,找到了一个折中的方式:输入框失去焦点时(即blur),或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制,要将光标停留在输入框内,方便用户进行修改。

哎,一说到用户输入回车键时才进行内容长度的检测又得说说以前栽的坑了

输入框中如何检测输入了回车键

其实这是一个很常见的交互,比如修改名称时支持用户输入回车后直接保存、登录时支持用户输入回车后直接登录。但其中要小心的坑是:**中文输入法下按回车键来输入英文字符**。

中文输入法下按回车键来输入英文字符的过程举例:

比如我要输入账号进行登录,我的账号是全英文的,我当前处于中文输入法,但我懒得切换输入法,于是我就直接敲了我的账号(全英文字符),这时搜狗输入法给我提示了一大串中文,然后我按了个回车,输入框就输入了我想要的英文字符。

在这种情况下,用户虽然输入了回车键,但用户按下回车键只是想在中文输入法下输入英文字符而已,这个回车键并不是我们想要监听的回车键。那么怎么排除这种情况下的回车键呢?

一般来说监听回车键我们会用keydown事件或者keyup事件,实现代码如下所示。那么是否这两种方法都能过滤掉我们不想监听的回车键呢?

经过试验发现:使用keydown是可以成功过滤的,但使用keyup不能。

那么我们来看看为什么?

是因为在keydown事件中:中文输入法状态下输入的回车键,检测的 keyCode为 而不是;单纯输入一个回车时,keyCode才是。

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

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

结语

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

查看这里:

自动化测试读写位操作系统的注册表 非Web程序(桌面程序)的设置一般都存在注册表中。给这些程序做自动化测试时,需要经常要跟注册表打交道。通过修改注册表来修改程序的设置。本

javascript深拷贝(deepClone)详解 javascript深拷贝是初学者甚至有经验的开发着,都会经常遇到问题,并不能很好的理解javascript的深拷贝。深拷贝(deepClone)?与深拷贝相对的就是浅拷贝,

Javascript中indexOf()和lastIndexOf应用方法实例 indexOf()方法indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。注释:indexOf()方法对大小写敏感!注释:如果要检索的字符串值没有出

标签: js限制数组长度

本文链接地址:https://www.jiuchutong.com/biancheng/373573.html 转载请保留说明!

上一篇:谈谈JavaScript中的几种借用方法(请问在javascript程序中)

下一篇:自动化测试读写64位操作系统的注册表(自动化测试读写题答案)

  • 企业可否自行决算利润
  • 非居民个人如何认定
  • 超市的小票能重开吗
  • 怎么从税控系统导出明细
  • 个税年度累计计算器
  • 财政拨款税收政策
  • 补交税款时加收的滞纳金有上限吗
  • 增值税组成计税价格包括消费税吗
  • 税前扣除凭证的内部凭证
  • 小规模纳税人未达起征点增值税处理
  • 残保金和工会经费需要计提吗
  • 物业公司水费差额征税不备案
  • 我的初级备考经验--有种力量叫坚持
  • 滴滴开票是专票还是普票
  • 个人所得税合并申报
  • 在同一预缴地有多个项目的建筑业纳税人总销售额以什么为标准确定?
  • 增值税减免税备案什么时候开始
  • 新版edge浏览器文字不显示
  • 缴纳印花税怎么算
  • 经销商计提折扣怎么算
  • win11 桌面右键
  • 增值税三流合一涉及子公司
  • PHP:imagecopymerge()的用法_GD库图像处理函数
  • php imagecopy
  • 以其他方式取得土地使用权
  • 企业职工教育培训
  • 企业所得税合理方法包括
  • 企业所得税纳税义务发生时间
  • 微信支付开发步骤
  • javascript获取字符串长度
  • 微软回应
  • 2022年终总结
  • semeion手写数据集
  • wordpress怎么用
  • 住宿费可以抵扣进项吗
  • 企业所得税核查报告
  • 福利部门的福利有哪些
  • 设备折旧费怎么使用
  • 一个简单的web项目名称
  • 织梦模板安装完整教程
  • 售后租回融资租赁帐务处理怎么做?
  • 普通增值发票可以抵扣进项税吗
  • 去银行取对账单需要带什么
  • 支付宝付款对面知道名字吗
  • 4s店开的维修发票怎么开
  • 异常凭证一定要转出吗
  • 飞机票抵扣进项税怎么填附表二
  • 预收账款是怎么算的
  • 房地产企业 预缴
  • 补缴以前年度的税
  • 从外面买回来的鸡蛋能孵出小鸡吗
  • 食品发票可以报销吗怎么报销
  • 企业会计制度怎么写
  • sql常用命令使用方法
  • Sqlserver中char,nchar,varchar与Nvarchar的区别分析
  • 让64位的Windows Server 2008支持蓝牙的方法
  • linux支持多种平台
  • usbmonit.exe - usbmonit是什么进程
  • centos中如何查看ip地址
  • windows xp无法访问samba共享夹
  • ini文件是什么意思
  • win7怎么查看
  • 在对linux系统中dir
  • javascript definitive guide
  • nodejs怎么安装npm
  • Node.js中的事件循环是什么
  • vtune自动安装脚本分享
  • windows常用网络命令的使用
  • 发送邮件python
  • formatter参数
  • 深入了解是啥意思
  • cs1-u和cs1-f的区别
  • js debounce实现
  • jquery设置边框
  • 详解javascript事件冒泡
  • 在海口二手房需交什么税
  • 下岗职工再就业优惠政策
  • 重庆办理4050社保需要什么材料
  • 开发票500以下
  • 税务稽查的后果
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设