little 'x' in textfield input on the iphone in mobileSafari?

Question

I have been looking everywhere for this without any luck. If you go to google.com on the iphone when you focus in on the search field a little 'x' appears all the way in the right and if you touch it it clears the current value of the field. Anybody know how to accomplish this?

Answer 1

A really good resource for iPhone web development is iphonewebdev.

However it seems like this particular feature is not part of Apple's API (at least from my research), rather a pure javascript / css implementation.

You can re-create it with something like this:

<script>
    window.onload = function() {
        var btn = document.getElementById("clear_input");
        btn.onclick = function() {
            var div = btn.parentNode;
            var input = div.getElementsByTagName("input")[0];
            input.value = "";
            return false;
        }
    }
</script>
<div>
    <input type="text" /><a href="#" id="clear_input">X</a>
</div>

You should style the X to be an image so that it blends inside the input. And of course I strongly recommend using a JavaScript framework if you can.

Answer 2

This is a special type of input developed by Apple and not approved by the W3C. If you use it, it works fine on browsers that don't recognize it.

<input type="search" name="q" />

There are other parameters, including domain name and search results so the user can use their search history. Google for how to use those.

Answer 3

I used the develop menu in Safari and changed the user agent to iPhone. Viewing the source on Google like this, it looks like they've set their html up like this:

<div class="gp2">
<input class="gp7" id="query" type="text" name="q" size="30" maxlength="2048" autocorrect="off" autocomplete="off" />
<a class="clear" id="clearQuery" href="#">
    <img src="data:image/gif;base64,R0lGODlhAQABAID%2FAMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" alt="" />
</a>

and are using this javascript:

function initClearQueryLink(query,clearQuery){
    clearQuery.setAttribute("title","Clear");
    clearQuery.addEventListener("mousedown",clearQueryBox,true);
    query.addEventListener("keyup",_handleClearQueryLink,false)
}

function _handleClearQueryLink(){
    var query=document.getElementById("query");
    var clearQuery=document.getElementById("clearQuery");
    if(clearQuery)
        if(query.value.length>0){
            clearQuery.style.display="inline";
            clearQuery.style.visibility="visible"
        } else{
            clearQuery.style.display="none";
            clearQuery.style.visibility="hidden"
        }
}

function clearQueryBox(event){
    var query=document.getElementById("query");
    var clearQuery=document.getElementById("clearQuery");
    query.value="";
    clearQuery.style.display="none";
    clearQuery.style.visibility="hidden";
    hideSuggest();
    if(event)event.preventDefault()
}

Answer 4

The trick is to listen for/bind event on mousedown that way the click event never fires and your input element doesn't lose focus. As in the google example above.