网页开发-ios键盘底部显示搜索按钮
·
1 min read
网页的输入框在手机侧触发输入时会唤起系统键盘，其中如果想键盘底部显示搜索按钮是需要设置的。
input type=“search”
如下设置后，实际测试iOS下并不会显示搜索按钮，但Android下会显示。
<input type="search" />
enterKeyHint=“search”
如下设置后，实际测试iOS下会显示搜索按钮。同时也保证了android手机能够正常显示。
<input type="search" enterKeyHint="search" />
search事件触发
Android下，当用户按下搜索按钮时，会触发search事件。但iPhone下，当用户按下搜索按钮时，只是触发enter事件。因此需要监听enter事件，并判断是否是搜索按钮。
el.addEventListener('search', (e) => {
console.log(e)
})
el.addEventListener('enter', (e) => {
if (e.key === 'Enter') {
console.log('搜索')
}
})
写在最后
如上即可解决在iOS/Android下输入框唤起键盘时，底部显示搜索按钮的问题。
