H5页面如何应对中文输入法

H5页面如何应对中文输入法_第1张图片
3c07008a38af8469.jpg

类似限制输入长度这种需求。
通常、我们会添加监听:


这段代码在英文、数字、符号输入等情况下是没有问题的。
但是在中文情况下:

web

H5页面如何应对中文输入法_第2张图片
144e08c0-e957-42ae-8878-c6d87be192f7.gif
app
H5页面如何应对中文输入法_第3张图片
d155b124-a639-4c39-825a-0953298288a5.gif

也就是表示在用户进行非直接输入的时候、监听事件也对用户行为进行了处理、这不是我们想要的。
所以、我们需要用到两个事件compositionstart 和 compositionend。


compositionstart事件在用户开始进行非直接输入的时候触发。
compositionend事件则在用户进行直接输入的时候触发。
通过一个开关inputLock。在用户进行非直接输入时不进行处理、改为直接输入时再进行处理。

web

2a71ba3d-e235-46c3-a954-77c22a9a6c3b.gif

app

H5页面如何应对中文输入法_第4张图片
0d8c4353-fb61-4c40-a8e7-cc28d38155a9.gif

有些浏览器或者手机版本下。input监听和compositionend调用的顺序可能会有先后。需要特殊注意。

你可能感兴趣的:(H5页面如何应对中文输入法)