位置: 编程技术 - 正文

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

  • 个人所得税汇算清缴截止日期
  • 实收资本印花税是一年一交吗
  • 收到税务局税收返还
  • 服务费发票的税率是多少
  • 广告费的明细
  • 建筑行业异地工资怎么算
  • 车险 专票
  • 个人转款到对公账户会计分录
  • 房产税的纳税义务
  • 政府补贴的内容
  • 占用农村宅基地建豪宅
  • 工业企业辅助生产费用的分配方法
  • 房产税没交会怎么样
  • 工程设备租赁带什么手续
  • 期末调汇的会计科目
  • 公司发实物要交税吗
  • 利润是负数不用计提所得税规定是什么?
  • 批发行业增值税税负率是多少呢
  • 税务会计核算范围
  • 发票过期一年可以用吗
  • 健身房属于什么经营类别
  • 检查所得税发现纳税差异如何调账?
  • 代销返还
  • 本年利润年末账务处理
  • 政府会计财政拨款收入借贷方向
  • ios路由设计
  • 光驱弹不出来灯也不亮
  • 销售回款率怎么计算
  • abm文件怎么打开
  • mediacachefiles什么意思
  • 转出固定资产账务处理
  • php iswriteable
  • 个体户转企业怎么做账
  • 全球矿业巨头力拓集团
  • 场地租赁费需要计提吗
  • 建筑行业总分包怎么算
  • 羊了不眄翻译
  • 视图的定义和操作实验报告
  • ChatGPT是如何训练得到的?通俗讲解
  • 视觉slam有多难
  • 预算会计的核算对象是什么
  • 金税盘中的发票修复是什么意思
  • 固定资产停止使用
  • 天猫如何不走对公账户
  • 批发和零售业行业代码
  • Advanced SQL Injection with MySQL
  • 财务报表审计的基础是独立性和专业性
  • 其它应付款的审计内容
  • 税控盘的进项税在哪里申报
  • 其他综合收益会影响未分配利润吗
  • 应收账款计提坏账影响利润吗
  • 研发费用的台账由谁做
  • 母子公司往来款属于借款吗
  • 个人借款产生的利息怎么计算的
  • 会计核算是否健全划分为
  • 预交了增值税款可以退吗
  • 电子承兑追索清偿的顺序
  • 消费满赠送活动规则
  • 新准则下企业开什么发票
  • 会计账务做得混乱的原因
  • 会计的几种折旧类型
  • 国家对民办幼儿园审批的条件有哪些?
  • 施工企业其他业务收入包括哪些
  • 出现错误,请联系客服
  • win8系统怎么把字体调大
  • window10打补丁
  • window系统怎么复制粘贴
  • win8如何清空电脑里的所有东西
  • win1021h2版本千万别更新
  • ubuntu apt-cdrom
  • windows10玩游戏卡吗
  • html中渐变
  • 一起学写字的宣传文案
  • jquery的实现原理
  • js实现点击按钮移动滑块到另一个按钮的方法
  • js如何使用
  • 出口发票与报关单名称不一致影响退税吗
  • 增值税发票怎么购票
  • 城市维护建设税属于什么科目
  • 车辆保险代收车船税会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设