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