位置: 编程技术 - 正文

关于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位操作系统的注册表(自动化测试读写题答案)

  • 无形资产摊销的会计科目
  • 研发费用明细账
  • 税务处理决定书与税务处罚决定书
  • 购货发票属于什么证据?
  • 暂估收入的必要条件
  • 收不回的款项怎么处理
  • 投资收益做什么
  • 贸易公司没有仓库需要做入库
  • 民办非企业单位属于什么类型
  • 食堂买菜无发票可以在费用中开支吗
  • 卖胶卷的店
  • 退休回聘政策与程序
  • 报销单冲抵借支做账
  • 高管培训费不能税前列支
  • 报废 库存商品
  • 如何计算房地产容积率与土地面积
  • 高速支付宝支付如何开发票
  • 新注册公司什么时候报个税
  • 银行贷款的坏账是什么意思
  • 劳务费单位没有代扣怎么办
  • 自产自用产品的会计处理
  • 苹果官网iPhone12
  • 预缴附加税款会退税吗
  • 长期股权投资转出账务处理
  • 纳税人购进农产品取得
  • 公司支付保洁费可以付给个人吗
  • php rewind
  • 资产减值损失的计算公式
  • LNMP部署laravel以及xhprof安装使用教程
  • 小米随身wf
  • php通用分页类
  • 污水处理增值税税率
  • html中的标签有哪些
  • 微信小程序自定义tabbar
  • Win11 KB5025239 / KB5025224 累积更新今日发布
  • 史上无敌的超级兵王
  • idea2020.2.3创建web
  • discuz去除底部
  • 独资设立的有限公司
  • 百度编辑器使用方法
  • 综合所得计税依据
  • 售后回购会计处理分录
  • 属于流动资产的项目有
  • 支付给个人的佣金没有发票
  • 一行的代码
  • 接受母公司捐赠现金分录
  • 什么是财产行为税举例
  • 消费税会计分录处理
  • 研发费用账务调整合同怎么写
  • 以前年度损失如何记账
  • 暂估金额为含税金额
  • 公司报税金额和实际发的不一致可以去告吗?
  • 如何理解会计的本质
  • 为什么贷款要收手续费
  • freebsd更新命令
  • win10的ghost
  • rundll32.exe是什么程序
  • app隐藏库
  • windows运行在哪
  • windows xp玩lol
  • winxp不能正常启动
  • mbr是什么启动
  • cocos2dx加libevent库
  • jquery怎么写
  • 主流安卓开发
  • vue父向子传方法
  • python xml dom
  • jquery操作checkbox火狐下第二次无法勾选的解决方法
  • python爬虫怎么做
  • jquery拖拽插件
  • unity 2danimation
  • 仿百度首页html代码静态
  • js实现带搜索功能的下拉菜单
  • jquery实现简单Tab切换菜单效果
  • 残疾人就业保障金减免政策2022
  • 三水水厂热线电话号码
  • 移动手机话费代扣
  • 沈阳国税局局长是谁
  • 西安车辆购置税缴纳需要什么材料
  • 深圳国税电子税务局入口
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设