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() }