input 确认按键事件在手机端不生效
起因
需要在页面上做一个搜索框,单独加一个按钮显得多余,所以直接使用确认键跳转
一般做法
这种做法就只有一个输入框,通过代码实现按键完成事件触发
在PC浏览器中是可以触发的,但在手机端没有触发事件,
通过单独调试,在手机端依然执行了方法,也获取到了event.key
, 但是在项目就是没有触发的事件
原因
当页面存在多个表单项时,手机端的确认键会自动移动焦点到下一个表单项,只有最后一个才会有效执行,如果不在form
标签中,则时自动查找整个网页,
所以,实际上只有最后一个表单项,才能实际接受到 event.key === 'Enter'
通过 Form 自带事件实现
这样就可以保证手机也可以支持,这个实际就是:表示 input
就是最后一项,可以确认了
input search
html5 自带一个搜索输入框,可以在手机键盘确认显示为搜索
自带一个清除图标和功能
通过 css 可以移除这个
同样的还有 密码框的 小眼睛
转载请保留原文链接: https://zodream.cn/blog/id/237.html