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

起因

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

一般做法

<input type="text" name="keywords" onkeydown="onKeydown(event)">

function onKeydown(event: KeyboardEvent)
{
    if (event.key === 'Enter') {
        // TODO
        return;
    }
}

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

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

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

原因

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

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

通过 Form 自带事件实现

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

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

input search

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

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

自带一个清除图标和功能

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

通过 css 可以移除这个

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

input[type="password"]::-ms-reveal {
    display: none;
}

转载请保留原文链接： https://zodream.cn/blog/id/237.html