开发者

<input type="search"> not working on iPhone Mobile Safari

开发者 https://www.devze.com 2023-01-24 23:45 出处:网络
Supposedly in HTML5 in Safari, you can define your input type as \"search\" and when the user starts 开发者_Go百科typing, an X button will show up to allow them to clear, much like the Google search b

Supposedly in HTML5 in Safari, you can define your input type as "search" and when the user starts 开发者_Go百科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.


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消