摘要：需求对用户的输入进行实时监控，当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示。实验发现，这种处理方式对于英文字符或者数字输入时效果完美，但是在输入中文时有。用这个事件，我们可以实现中文输入法截断的问题了。
需求：对用户的输入进行实时监控，当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示。
看到这一需求，第一想法就是对所需实时监控的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...，感谢原文作者。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80926.html
摘要：实时监控实时监控包括四部分带宽监控请求数监控命中率监控和状态码监控。并统计该时间段内选中域名的请求数峰值请求数谷值以及总请求数。状态码监控该页面下，将展示筛选条件下的状态码折线图。实时监控实时监控包括四部分：带宽监控、请求数监控、命中率监控和HTTP状态码监控。点击进入实时监控页面。选择需要查看监控的域名列表，可单选、多选、全选。系统默认展示最近一天的监控情况，也可根据需求选择时长。筛选条件...
摘要：一需求阐述和常用的解决方案制作一个文本框限制最大字数，实时监听当前已经输入的字数，并显示出来。因此单纯的监听事件显示是不够的。如果页面里需要多个文本框都要限制字数如何实现。 一、需求阐述和常用的解决方案 制作一个文本框限制最大字数，实时监听当前已经输入的字数，并显示出来。期初我实现这个功能的方法很简单：给textarea控件添加onkeyup事件方法，在方法中将textarea值的长度...
摘要：所以最后牺牲了下用户体验，找到了一个折中的方式输入框失去焦点时即，或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制，要将光标停留在输入框内，方便用户进行修改。 前言 最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。 这交互听起来没啥问题，技术实现上似...
阅读 2341·2021-11-12 10:34
阅读 1431·2019-08-29 16:15
阅读 2649·2019-08-29 15:17
阅读 1289·2019-08-23 17:09
阅读 364·2019-08-23 11:37
阅读 2413·2019-08-23 10:39
阅读 424·2019-08-22 16:43
阅读 3081·2019-08-22 14:53
