7

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"

abritez
  • 2,616
  • 3
  • 29
  • 36

3 Answers3

15

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)

kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
7

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jesse
  • 101
  • 1
  • Thanks for the info! Nice to have, but not necessary in my app. – abritez Jan 19 '10 at 21:25
  • "search" is listed as input type here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/InputTypes.html#//apple_ref/doc/uid/TP40008055-SW15 – Cœur May 07 '18 at 15:52
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/>
Jesse
  • 101
  • 1