pequeña 'x' en la entrada de campo de texto en el iphone en mobileSafari?

Question

He estado buscando por todas partes sin suerte. Si vas a google.com en el iPhone cuando te enfocas en el campo de búsqueda, aparece un poco de "x" en el extremo derecho y si lo tocas, borra el valor actual del campo. ¿Alguien sabe cómo lograr esto?

Answer 1

Utilicé el menú de desarrollo en Safari y cambié el agente de usuario a iPhone. Visualización de la fuente en Google, parece que ellos han puesto su html así:

<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> 

y están utilizando esta 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

Un recurso realmente bueno para el desarrollo web de iPhone es iphonewebdev.

Sin embargo, parece que esta característica en particular no es parte de la API de Apple (al menos de mi investigación), sino una implementación pura de javascript/css.

Se puede volver a crearlo con algo como esto:

<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> 

Debería el estilo de la X para ser una imagen para que se funda dentro de la entrada. Y, por supuesto, le recomiendo usar un marco de JavaScript si puede.

Answer 3

Este es un tipo especial de entrada desarrollada por Apple y no aprobada por el W3C. Si lo usa, funciona bien en los navegadores que no lo reconocen.

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

hay otros parámetros, incluyendo el nombre de dominio y los resultados de búsqueda por lo que el usuario puede tener acceso a su historial de búsqueda. Google para saber cómo usarlos.

Answer 4

El truco es escuchar/vincular evento en mousedown de esa manera nunca se dispara el evento click y su elemento de entrada no pierde el foco. Como en el ejemplo de google arriba.

Answer 5

Y esta es mi versión de jQuery, la oculta al inicio, y si el usuario elimina lo que está tipeado, eliminará la 'x'. Además, cuando hayan eliminado el texto con el botón, también ocultará la 'x'.

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

La versión JavaScript es más rápido que la versión de jQuery, por supuesto.

Answer 6

jQuery Mobile ofrece esto:

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