这里整理的内容会持续更新,如有意见欢迎您的指教批评,希望对你会有些许帮助,示例代码如下:
在这里插入代码片在获取到焦点显示闪烁光标时触发
在使用键盘输入时只要输入框中的值改变,即可触发
紧跟在keyup之后触发,keyup之后keydown
在使用软键盘输入时实时触发该事件,input的事件在该事件之前;
在输入框焦点消失时能正常获取到输入框中的内容;
在输入中文和英文过程中只会触发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在获取到焦点显示闪烁光标时触发
在使用键盘输入英文字符或删除时只要输入框中的值改变,即可触发;但是在输入中文时会触发多次,甚至有的时候存在无法获取到输入框中的值的情况出现,因此需要结合另外的两个事件(compositionstart,compositionend)在compositionend之后来做处理,需要在input和compositionend两个里面都做处理;
紧跟在keyup之后触发,keyup之后keydown
触发该事件之后,再触发input之后又触发了该事件,但是两次事件都无法拿到输入框的值; 但是在输入中文点击确认按钮时无法触发keyup事件,只能触发input事件,在一次性触发的input三次事件中中间有一次无法正确拿到对应的输入框中的值;
在点击IOS软件盘完成按钮时即可触发blur事件,此时可以正确的获取到input的输入值;
在点击软键盘刚开始输入中文未点确认时对应的事件次序: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