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


<form><input type="text" placeholder="Search stories" ></form>
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. <input type="search"> didn’t worked for me.

So only thing worked for me was to put my input element inside form element.

// 2. When I press Search on keypad then action should take place or some event should fire off without redirecting or refreshing the page.

This one is important. When I was calling my javascript function when pressing the button then page was getting refreshed everytime. It was basically redirecting to itself. To fix this I used combination of onsubmit and action attributes.

<form><input type="text" onsubmit="search(event);" action="return false;" placeholder="Search stories"></form>
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.

// 3. Lastly when I press ‘Search’ then keypad should also go down or dismissed.

For this one only javascript code worked for me. There was no pure html based solution.

document.activeElement.blur();

This code resigns the keypad from current focused input element.