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.

You might also like: CSS Hex Code Colors With Alpha Values

You might also like: Mailto: Email Link Tricks

// 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.