input 确认按键事件在手机端不生效

Fork Me On Github
zodream 编程技术 Html 2023年03月

input 确认按键事件在手机端不生效

起因

需要在页面上做一个搜索框,单独加一个按钮显得多余,所以直接使用确认键跳转

一般做法

html
 
<input type="text" name="keywords" onkeydown="onKeydown(event)">
1
ts
        
function onKeydown(event: KeyboardEvent)
{
    if (event.key === 'Enter') {
        // TODO
        return;
    }
}
12345678

这种做法就只有一个输入框,通过代码实现按键完成事件触发

在PC浏览器中是可以触发的,但在手机端没有触发事件,

通过单独调试,在手机端依然执行了方法,也获取到了event.key, 但是在项目就是没有触发的事件

原因

当页面存在多个表单项时,手机端的确认键会自动移动焦点到下一个表单项,只有最后一个才会有效执行,如果不在form 标签中,则时自动查找整个网页,

所以,实际上只有最后一个表单项,才能实际接受到 event.key === 'Enter'

通过 Form 自带事件实现

html
   
<form onsubmit="//TODO">
    <input type="text" name="keywords">
</form>
123

这样就可以保证手机也可以支持,这个实际就是:表示 input 就是最后一项,可以确认了

input search

html
 
<input type="search" name="keywords">
1

html5 自带一个搜索输入框,可以在手机键盘确认显示为搜索

自带一个清除图标和功能

css
   
input::-ms-clear {
    display: none;
}
123

通过 css 可以移除这个

同样的还有 密码框的 小眼睛

css
   
input[type="password"]::-ms-reveal {
    display: none;
}
123
点击查看全文
0 99 0