问题:

Supposedly in HTML5 in Safari, you can define your input type as "search" and when the user starts typing, an X button will show up to allow them to clear, much like the Google search bar in Safari. On my website, this works on desktop Safari but it doesn't work in Mobile Safari.

    <input id="termsField" type="search" autocorrect="off" placeholder="Type something here">

//This is the code for the X button I have to use now since HTML5 doesn't work
<INPUT type="image" name="Clear" alt="Clear" src="clearX.png" height="22" width="22"
        onClick="clearText(this)">

At first I thought it's because I have a Jquery autocomplete function on the #termsField but again if it works in Desktop Safari that wouldn't be the case. Does anyone have any idea why this might be happening? Also, it doesn't work either on my iPhone or in the iPhone Simulator in XCode so it's not an issue specifically with my iPhone.

回答1:

That works in (Desktop) Safari, but not on the iPhone (Mobile Safari). You can mimic the functionality via some clever javascript.

回答2:

you need to make the type="search" attribute the first one in the tag - ie

<input type="search" id="termsField" autocorrect="off" 
       placeholder="Type something here" />

This bug has since been resolved for iphones but android browsers still need the search attribute first, otherwise it will be rendered as a standard input field.