位置: 编程技术 - 正文

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

  • 销项税额期末余额
  • 汇算清缴所得税退回做账
  • 工程监理费开什么发票
  • 融资租赁的两种模式
  • 职工福利费允许结转以后年度扣除吗
  • 民办非企业可以上市吗
  • 预缴所得税的计税依据
  • 旅游发票可以抵扣吗
  • 营业额和合同额的区别
  • 调试费含税吗
  • 广告制作税目
  • 经营租入的固定资产是资产吗
  • 厂房怎么计提折旧费
  • 房地产销售土地增值税纳税人减免申请核准表
  • 小规模收到货运专用发票
  • 董事费如何计算个人所得税
  • 什么情况下的发烧才会全身酸痛呢
  • 合并报表收费
  • 公司员工餐费会计分录
  • 增值税专用发票有效期是多长时间
  • 床垫增值税税率是多少
  • 家具厂打磨工工作图片
  • 公司奖金没有按时发可以要吗
  • redis使用php
  • 退回多缴的所得税怎么算
  • PHP:pg_field_size()的用法_PostgreSQL函数
  • rnbrcache.exe是什么意思
  • 一列火车穿过一条隧道,已知火车长450米,隧道长750米
  • 下载文件是php
  • php精彩编程200例
  • 无形资产使用寿命的复核
  • 小企业会计准则没有以前年度损益调整科目
  • 陶尔米纳电影节
  • 微信支付开发文档教程
  • googlelabs
  • vue框架总结
  • ai绘图软件教程
  • win11 退回
  • 使用命令查看
  • php is_executable判断给定文件名是否可执行实例
  • 固定资产盘盈税务处理政策
  • layui框架模板
  • 微擎框架破解版v2.7.7
  • 新企业会计准则
  • 代收代付业务
  • 进口商品销售的会计分录
  • 库存品处理的方式
  • 织梦如何使用
  • sql 集合运算符
  • 预付房租如何做分录
  • 递延所得税资产账务处理
  • 高新企业税收减免多少
  • 单独运费怎么做账
  • 企业筹建期的开办不少于多少年
  • 取暖费用摊销吗
  • 施工企业应收账款周转率多少合适
  • 合法有效的凭证是什么
  • 用户登陆login什么意思
  • sqlserver的主数据库是什么
  • IIS7在Windows Server 2008R2的新改进
  • mac怎么打开terminal
  • win10系统如何关闭窗口特效
  • centos 发行版
  • linux deploy 无root
  • 网卡被禁用一启动就死机
  • linux中nfs的搭建
  • 安卓app开发框架模板
  • perl数组元素个数
  • jquery删除所有class
  • android profiler内存分析
  • jQ处理xml文件和xml字符串的方法(详解)
  • vue2.x
  • JavaScript中数组长度的属性
  • jQuery使用animate实现ul列表项相互飘动效果示例
  • 零基础入门安卓逆向
  • 税务上成品油换算
  • 2023车船税收费价格表图片
  • 百望税控盘电子发票开好了如何打印及导出发票
  • 税务补录什么时候上班
  • 怎么看扣税明细
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设