Show search button in safari keyboard using html
While working with search input in html form I came across steps of information that helped me manipulate iOS keypad. What do I mean by manipulating iOS keypad? It doesn’t mean changing anything about core physical appearance or device capability of software keyboard or device.I have three requirements for when keypad is up when html input element is active:
- Search should be the text over return/action button
- When I press Search on keypad then action should take place or some event should fire off without redirecting or refreshing the page.
- Lastly when I press ‘Search’ then keypad should also go down or dismissed.
// 1. ‘Search’ should be the text over ‘return’ or action button
Here I found that without using form element, input element does not show ‘Search’ button on keypad. Even using solution from internet where using value ‘search’ of attribute type property doesn’t work.
<form><input type="text" placeholder="Search stories" ></form>
<input type="search">didn’t worked for me.
So only thing worked for me was to put my input element inside form element.
I used onsubmit for event and to avoid redirection I used action attribute from where I am returning false. This is the only solution that worked for me. Circumstances and scenarios could be different for people and use cases.
<form><input type="text" onsubmit="search(event);" action="return false;" placeholder="Search stories"></form>
This code resigns the keypad from current focused input element.