首页 > 热点 > > 正文

第79题:input搜索如何防抖,如何处理中文输入:新要闻

2023-02-08 11:48:43 来源:文江博客 分享到:


(资料图)

防抖就不说了,主要是这里提到的中文输入问题,其实看过 elementui 框架源码的童鞋都应该知道,elementui 是通过 compositionstart & compositionend 做的中文输入处理:相关代码:

这3个方法是原生的方法,这里简单介绍下,官方定义如下 compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)简单来说就是切换中文输入法时在打拼音时(此时 input 内还没有填入真正的内容),会首先触发 compositionstart,然后每打一个拼音字母,触发 compositionupdate,最后将输入好的中文填入 input 中时触发 compositionend。触发 compositionstart 时,文本框会填入

虚拟文本

(待确认文本),同时触发 input 事件;在触发 compositionend 时,就是填入实际内容后(已确认文本),所以这里如果不想触发 input 事件的话就得设置一个 bool 变量来控制。

根据上图可以看到输入到 input 框触发 input 事件,失去焦点后内容有改变触发 change 事件,识别到你开始使用中文输入法触发 compositionstart 事件,未输入结束但还在输入中触发 compositionupdate 事件输入完成(也就是我们回车或者选择了对应的文字插入到输入框的时刻)触发 compositionend 事件。那么问题来了使用这几个事件能做什么?因为 input 组件常常跟 form 表单一起出现,需要做表单验证

为了解决中文输入法输入内容时还没将中文插入到输入框就验证的问题,我们希望中文输入完成以后才验证。

标签: 如何处理 中文输入

Copyright ©  2015-2022 世界仪表网版权所有  备案号:琼ICP备2022009675号-1   联系邮箱:435 227 67@qq.com