little 'x' nell'input di testo sull'iPhone in mobileSafari?

Question

Ho cercato ovunque senza fortuna. Se vai a google.com sull'iPhone quando ti concentri sul campo di ricerca, un po 'di "x" appare completamente a destra e se lo tocchi cancella il valore corrente del campo. Qualcuno sa come realizzare questo?

Answer 1

Ho usato il menu di sviluppo in Safari e ho cambiato l'agente utente in iPhone. Visualizzazione della fonte su Google, sembra che hanno impostato la loro html come questo:

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

e stanno usando questo 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

Una risorsa davvero buona per lo sviluppo web di iPhone è iphonewebdev.

Tuttavia sembra che questa particolare caratteristica non sia parte dell'API di Apple (almeno dalla mia ricerca), piuttosto una pura implementazione javascript/css.

È possibile ricreare con qualcosa di simile:

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

Si dovrebbe acconciare la X di essere un'immagine in modo che si fonde dentro l'ingresso. E ovviamente raccomando caldamente di usare un framework JavaScript, se puoi.

Answer 3

Questo è un tipo speciale di input sviluppato da Apple e non approvato dal W3C. Se lo usi, funziona bene su browser che non lo riconoscono.

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

Non ci sono altri parametri, compreso il nome di dominio e dei risultati di ricerca in modo che l'utente può utilizzare la cronologia delle ricerche. Google per come usare quelli.

Answer 4

Il trucco è quello di ascoltare/vincola l'evento sul mouse in questo modo l'evento click non si attiva mai e il tuo elemento di input non perde la concentrazione. Come nell'esempio di google sopra.

Answer 5

E questa è la mia versione jQuery, la nasconde all'inizio, e se l'utente cancella ciò che è stato digitato rimuoverà la 'x'. Inoltre, quando hanno rimosso il testo con il pulsante, nasconde anche 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 versione JavaScript è più veloce rispetto alla versione jQuery naturalmente.

Answer 6

jQuery Mobile fornisce questo:

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