Web Dev — Show Search Button on iOS Keyboard
·
1 min read
·
138
Words
·
-Views
-Comments
On mobile, focusing a web input field brings up the system keyboard. If you want a “Search” button to appear on the keyboard, some attributes are needed.
input type=“search”
With the following, iOS does not show a Search button in testing, while Android does.
<input type="search" />
enterKeyHint=“search”
With the following, iOS does show the Search button. Android also displays it correctly.
<input type="search" enterKeyHint="search" />
search event firing
On Android, pressing the Search button fires the search event. On iPhone, pressing Search only triggers the Enter event. So listen for Enter and check accordingly.
el.addEventListener('search', (e) => {
console.log(e)
})
el.addEventListener('enter', (e) => {
if (e.key === 'Enter') {
console.log('Search')
}
})
Final Thoughts
The above solves showing a Search button on the mobile keyboard for both iOS and Android when an input is focused.
