需求:对用户的输入进行实时监控,当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示。

看到这一需求,第一想法就是对所需实时监控的input输入框绑定input/propertychange事件,然后在input/propertychange事件的处理函数中对用户实时输入内容进行长度判断。

实验发现,这种处理方式对于英文字符或者数字输入时效果完美,但是在输入中文时有bug。如下图所示,规定字符长度为5(此处不区分中英文),在中文输入时,用户还没有输入他想输入的中文,只是输入了几个拼音字符,但 input 事件也被触发了,提示长度超过上线!这并不是我们所希望的!我们希望当用户输入中文,能够在用户将想输入的中文内容输入到input框再进行长度判断。

在网上找了解决方案时,发现了一些以前没听过的事件。

复合事件
复合事件(composition event)是DOM3级事件中新添加的一类事件,用于处理IME的输入序列。IME(Input Method Editor,输入法编辑器)可以让用户输入在物理键盘上找不到的字符。复合事件就是针对检测和处理这种输入而设计的。
(1)compositionstart:在IME的文本复合系统打开时触发,表示要开始输入了。
(2)compositionupdate:在向输入字段中插入新字符时触发。
(3)compositionend:在IME的文本复合系统关闭时触发,表示返回正常键盘的输入状态。

用这个事件,我们可以实现中文输入法截断的问题了。代码如下:

此处要注意,在compositionend事件即输入结束时要去触发长度判断事件。
本文参考了http://coolmogu.com/2016/01/2...,感谢原文作者。

实时监控用户输入--中文输入解决方案相关推荐

  1. ubuntu系统安装好搜狗输入法后只能输入英文,无法输入中文的解决方案

    写在前面 自己的电脑环境:Ubuntu20.04.5 一.问题描述 自己通过搜狗输入法官网下载deb安装包,然后按照如下指令安装搜狗输入法之后 sudo dpkg -i sogoupinyin_4.0 ...

  2. linux下搜狗输入法不能输入中文的解决方案

    CSDN GitHub linux 下搜狗输入法不能输入中文的解决方案 AderXCoding/system/tools/sougoupinyin 本作品采用知识共享署名-非商业性使用-相同方式共享 ...

  3. SQL Server 2005无法输入中文的解决方案

    在 SQL Server 2005 Manger Studio中打开表输入记录时,无法输入中文,出现这种情况,一般情况下是因为你表中的第一列为自增列或者只读列,只要将其第一列的自增列或只读列取消,即可 ...

  4. input在限制长度时,输入中文输入会自动清空(将拼音的长度计算在内)

    描述 在使用oninput监控输入框内容变化时,我们期望仅在value值变化时,才触发oninput事件,而在中文输入下,未选词时的按键也会触发oninput事件. 现象 input限制长度,输入中文 ...

  5. keil u5无法输入中文 输入汉字乱码

    keil u5写代码时,无法输入汉字,显示乱码(如下图),参考相关文章,解决了 将默认的"ANSI"换成简体中文, 打开Configuration, 路径:Edit菜单,最后一个菜 ...

  6. 手工处理int3实时监控Linux系统键盘输入

    上周写了一篇Linux系统监控键盘输入的文字: https://blog.csdn.net/dog250/article/details/106425811 事后想了下,能不能不用标准的5字节32位相 ...

  7. 【重拾Prezi】Prezi安装入门——Prezi安装+试用期限制+中文输入

    好久没有用Prezi,当年还是2012年的时候吧,最近公司在弄供应链系统,培训了三天头昏脑胀,想用PPT等大而化之的梳理一下思路,于是想到了Prezi,于是下载启用之. Prezi下载安装 直接从 h ...

  8. ad域服务器用户登录限制,AD域监控用户登录, 活动目录监控用户, AD登录历史审核...

    实时监控用户登录操作 用户登录到其域计算机是在任何企业都会发生的日常活动.一开始,这看起来可能是一个简单的Active Directory事件,但分配有不同角色的管理员可将这个宝贵的数据用于各种审核. ...

  9. 使用socket解决,网页应用监控用户唯一在线

    在这里我提供一种思路,因为考研原因,没有整理很详细的代码,希望大家谅解. 大家 真想解决这个问题的话,真的可以看一下,我的经验所获,绝对可以用. 不过小白可能看不懂,最好知道什么是Websocket, ...

最新文章

  1. 上传镜像文件到服务器,通过把docker镜像保存为文件载入到别的服务器
  2. 【Linux】虚拟地址空间
  3. 高德再回应导航错误致景区严重拥堵 这次复盘了事件原因
  4. 华为Mate 20 X(5G)评测:6199元的5G双模旗舰手机
  5. Shell 单行注释与多行注释
  6. glShadeModel
  7. bio、nio、aio及select、poll、epoll
  8. 转载关于Qsys的 指令总线 和 数据总线
  9. 【Mark工具】一些好用的图片标注工具
  10. com词根词缀_【单词杂谈】推荐几个学习英语词根词缀的网站,建议收藏!
  11. 【转载】DEDE与DISCUZ整合积分同步[会员表,积分表
  12. 计算机无法识别苹果6手机,电脑无法识别iphone6怎么处理
  13. Flappy Bird游戏——Python
  14. Kaggle一周30小时Tesla P100教程~
  15. UNRAID挂载exFat格式的USB磁盘
  16. 做了7年开源数据库开发,我学到了什么?
  17. 安装SQL Server 2000时出现“以前的某个程序安装已在安装……”
  18. mysql中表联结_Mysql表联结
  19. 学编程该如何入门?看什么书?
  20. 中小型企业计算机局域网总体方案设计

热门文章

  1. jstatd - Virtual Machine jstat Daemon
  2. [CTO札记]高效能辅导(Coach)转摘
  3. Flexbox Guide
  4. 你不知道的JavaScript·第一部分
  5. A Color Picker based on manifold learning
  6. 激励理论在人力资源管理中的运用
  7. 玩玩.net的ildasm與ilasm (转)
  8. 【转载】学习嵌入式系统需要具备的条件、方法及步骤
  9. 树的子结构 (剑指offer)
  10. Uber将动态调价机制引入其外卖服务UberEats