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

    技术2023-05-19  89

    移动端H5 input事件汇总

    这里汇总了Android和IOS端的input事件汇总Android 端的H5 input事件1. focus事件2. input事件3. keydown事件4. keyup事件5. blur事件6. compositionstart与compositionend事件 IOS端的H5 input事件1. focus事件2. input事件3. keydown事件4. keyup事件5. blur事件6. compositionstart与compositionend事件

    这里汇总了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
    Processed: 0.017, SQL: 9