网页开发-ios键盘底部显示搜索按钮

发表于 本文字数： 722 阅读时长 ≈ 1 分钟

网页的输入框在手机侧触发输入时会唤起系统键盘，其中如果想键盘底部显示搜索按钮是需要设置的。

input type=”search”

如下设置后，实际测试iOS下并不会显示搜索按钮，但Android下会显示。

1
<input type="search" />

enterKeyHint=”search”

如下设置后，实际测试iOS下会显示搜索按钮。同时也保证了android手机能够正常显示。

1
<input type="search" enterKeyHint="search" />

search事件触发

Android下，当用户按下搜索按钮时，会触发search事件。但iPhone下，当用户按下搜索按钮时，只是触发enter事件。因此需要监听enter事件，并判断是否是搜索按钮。

1
2
3
4
5
6
7
8
9
el.addEventListener('search', (e) => {
  console.log(e)
})

el.addEventListener('enter', (e) => {
  if (e.key === 'Enter') {
    console.log('搜索')
  }
})

写在最后

如上即可解决在iOS/Android下输入框唤起键盘时，底部显示搜索按钮的问题。

参考