Show 'Search' button in iPhone/iPad Safari

Question

I've noticed navigating in websites like Dell or Google, that typing in their search text box with iPhone, in the keyboard appears a blue button 'Search' instead of the standard 'Go' button that appears on any normal form.

What should you do to display the search button?

Answer 1

On iOS 8 you can enable the blue "Search"-button on the keyboard by doing one of:

• add input name=search
• add input type=search
• add id to input with the case sensitive word "search" in the ID, for example the-search or thesearchgod

Answer 2

having type="search" is usually all you need to make software Search keyboard appear however in iOS8 it is mandatory to have a wrapping form with action attribute.

So the following code would have a software keyboard with “Return” button

<form>
    <input type="search" />
</form>

But this code should have blue “Search” button instead

<form action=".">
    <input type="search" />
</form>

Answer 3

You can influence this behaviour with:

<input type="search" />

JS Bin demo

Ignore the submit button's text being 'kettle,' I just wanted to be sure that it wasn't the submit button influencing the text of the iOS keyboard...

This is, of course, backwards compatible since a browser that doesn't understand type="search" will default to type="text", which is useful for creating forward-planning html5 forms.

Answer 4

The keyboard is handled by the operating system (iOS) and cannot be directly altered. The type of input required determines the type of keyboard to display.

If the website in question is HTML5, then @David's answer is valid.

Answer 5

I was not able to get the search button with

<input type="search" />

However, I did get it to appear with

<form>
    <input name="search" />
</form>