little 'x' in textfield input on the iphon

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

I used the develop menu in Safari and changed the user agent to iPhone. Viewing the source on Google, 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 2

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 3

Jquery mobile provides this:

http://jquerymobile.com/test/docs/forms/search/

Answer 4

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 5

And this is my jQuery version, it hides it at the start, and if the user deletes what is typed it will remove the 'x'. Also when they have removed the text with the button it will hide the 'x' too.

html:

<input type="search" name="search" id="search" />
<a href="#" class="clear_input">X</a>

JavaScript:

$('.clear_input').hide();   
    $('#search').keyup(function() {

        var search = $(this).val().replace(/^\s+|\s+$/g,"");

        if (search.length >= 1) {
            $('.clear_input').show();
        } else {
            $('.clear_input').hide();
        }

        $('.clear_input').click(function() {
            $('#search').val('');
            $('.clear_input').hide();
        }); 
    });

The JavaScript version is faster than the jQuery version of course.

Answer 6

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.