Getting Search Keyboard on iPhone using PhoneGap

Question

I have created a search field on a mobile app i am creating via PhoneGap. I've tried using with no luck. I also know that i could get around the visual aspect of the input field via CSS & Javascript, however how do i get the Keyboard to have a "SEARCH" button on the bottom right instead of it saying "RETURN"

Answer 1

Use

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

The <form> is a must.

(See also http://groups.google.com/group/phonegap/browse_thread/thread/bca19709dbdf2e24/eb312d0607102395?lnk=raot)

Answer 2

The following are supported in mobile safari, and therefore PhoneGap since iPhone OS 3.1

Text: <input type="text" />

Telephone: <input type="tel" />

URL: <input type="url" />

Email: <input type="email" />

Zip Code: <input type="text" pattern="[0-9]*" />

Search is not supported as an input type, and would require considerable native work to make happen in PhoneGap.

See here for details: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

Answer 3

Update: The following input type works as expected:

There are some important things that you have to keep in mind:

It only works on iPhone OS 3.1 +

The input tag MUST be inside a tag.

Also, it is worth noting the following tags as well:

<!-- display a telephone keypad -->
<label for="tiTel">Telephone:</label>
<input type="tel" id="tiTel"/> 
<br/>

<!-- display a URL keyboard -->
<label for="tiUrl">URL:</label>
<input type="url" id="tiUrl"/>
<br/>

<!-- display an email keyboard -->
<label for="tiEmail">Email:</label> 
<input type="email" id="tiEmail"/>
<br/>

<!-- display a numeric keyboard -->
<label for="tiZip">Zip Code:</label>
<input type="text" pattern="[0-9]*" id="tiZip"/>
<br/>