Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

ajax

iphone

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?

like image 496
user73481 Avatar asked Mar 05 '09 00:03

user73481


5 Answers

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()
}
like image 60
Justin Gallagher Avatar answered Nov 18 '22 05:11

Justin Gallagher


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.

like image 28
August Avatar answered Nov 18 '22 05:11

August


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.

like image 37
Patrick Arlt Avatar answered Nov 18 '22 07:11

Patrick Arlt


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.

like image 27
Luca Matteis Avatar answered Nov 18 '22 06:11

Luca Matteis


Jquery mobile provides this:

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

like image 1
Jesse Smith Avatar answered Nov 18 '22 07:11

Jesse Smith