移动端H5 input移动端事件汇总

这里汇总了Android和IOS端的input事件汇总

这里整理的内容会持续更新，如有意见欢迎您的指教批评，希望对你会有些许帮助，示例代码如下：

在这里插入代码片

Android 端的H5 input事件

1. focus事件

在获取到焦点显示闪烁光标时触发

2. input事件

在使用键盘输入时只要输入框中的值改变，即可触发

3. keydown事件

紧跟在keyup之后触发，keyup之后keydown

4. keyup事件

在使用软键盘输入时实时触发该事件，input的事件在该事件之前;

5. blur事件

在输入框焦点消失时能正常获取到输入框中的内容；

6. compositionstart与compositionend事件

在输入中文和英文过程中只会触发input和keyup事件，输出如下：

focus-事件--0 at ceshi.html : 25
keyup-事件--1 at ceshi.html : 31
keydown-事件--2 at ceshi.html : 34
input-事件-p-3 at ceshi.html : 28
keyup-事件-p-4 at ceshi.html : 31
keydown-事件-p-5 at ceshi.html : 34
input-事件-p嗯-6 at ceshi.html : 28
blur-事件-p嗯-7 at ceshi.html : 37

IOS端的H5 input事件

1. focus事件

在获取到焦点显示闪烁光标时触发

2. input事件

在使用键盘输入英文字符或删除时只要输入框中的值改变，即可触发；但是在输入中文时会触发多次，甚至有的时候存在无法获取到输入框中的值的情况出现，因此需要结合另外的两个事件(compositionstart,compositionend)在compositionend之后来做处理，需要在input和compositionend两个里面都做处理;

3. keydown事件

紧跟在keyup之后触发，keyup之后keydown

4. keyup事件

触发该事件之后，再触发input之后又触发了该事件，但是两次事件都无法拿到输入框的值； 但是在输入中文点击确认按钮时无法触发keyup事件，只能触发input事件，在一次性触发的input三次事件中中间有一次无法正确拿到对应的输入框中的值；

5. blur事件

在点击IOS软件盘完成按钮时即可触发blur事件，此时可以正确的获取到input的输入值；

6. compositionstart与compositionend事件

在点击软键盘刚开始输入中文未点确认时对应的事件次序：keyup(省略keydown)、compositionstart、input(可获取值)、keyup(可获取值),点击提示汉字时对应的事件次序：input(可获取值)、input、input(可获取值)、compositionend(可获取值)；对应的输出顺序如下：

focus-事件--0
keyup-事件--1
keydown-事件--2
input-事件- -3
keyup-事件- -4
keydown-事件- -5
compositionstart-事件- -6
input-事件- p-7
keyup-事件- p-8
keydown-事件- p-9
input-事件- p j-10
input-事件- 拼接-11
input-事件- -12
input-事件- 拼接-13
compositionend-事件- 拼接-14
blur-事件- 拼接-15

在输入英文的情况，对于全键盘模式下,触发顺序与前次输入中文一致keyup(省略keydown)、compositionstart、input(可获取准确值)、keyup(可获取准确值)，点击确认后也是input(可获取准确值)、input、input(可获取准确值)、compositionend(可获取准确值)，对应的输出顺序是

focus-事件--0
blur-事件--1
focus-事件--0
keyup-事件--1
keydown-事件--2
compositionstart-事件--3
input-事件-P-4
keyup-事件-P-5
keydown-事件-P-6
input-事件-PK-7
input-事件-PK-8
input-事件--9
input-事件-PK-10
compositionend-事件-PK-11
blur-事件-PK-12