małe "x" w polu tekstowym na iphone w mobileSafari?

Question

Szukałem wszędzie tego bez żadnego szczęścia. Jeśli przejdziesz do witryny google.com na telefonie iPhone, gdy skupisz się na polu wyszukiwania, po prawej stronie pojawi się małe "x", a dotknięcie go spowoduje wyczyszczenie bieżącej wartości pola. Ktoś wie, jak to osiągnąć?

Answer 1

użyłem menu rozwijać się w Safari i zmienił agenta użytkownika do iPhone. Przedstawiamy źródło w Google, wygląda na to, że już ustalony html się tak:

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

i używasz tego 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

Naprawdę dobre źródło informacji dla rozwoju sieci web iPhone jest iphonewebdev.

Jednak wydaje się, jakby to szczególna cecha nie jest częścią firmy Apple API (przynajmniej z moich badań), a czystym realizacji javascript/css.

Można odtworzyć go z czymś takim:

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

Należy styl X, aby mieć obraz tak, że łączy się z wejściem do środka. I oczywiście zdecydowanie polecam korzystanie ze środowiska JavaScript, jeśli możesz.

Answer 3

Jest to specjalny typ wejścia opracowany przez Apple i nie zatwierdzone przez W3C. Jeśli go używasz, działa dobrze w przeglądarkach, które go nie rozpoznają.

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

Istnieją inne parametry, takie jak nazwa domeny i wynikach wyszukiwania, dzięki czemu użytkownik może wykorzystać swoją historię wyszukiwania. Google, jak z nich korzystać.

Answer 4

Sztuką jest, aby słuchać/bind event na mousedown w ten sposób zdarzenie click nigdy się nie uruchamia, a twój element wejściowy nie traci ostrości. Jak w powyższym przykładzie google.

Answer 5

A to jest moja wersja jQuery, ukrywa go na początku, a jeśli użytkownik usunie to, co jest wpisane usunie „x”. Również po usunięciu tekstu za pomocą przycisku ukryje również "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(); 
     }); 
    }); 

Wersja JavaScript jest szybsza niż wersja jQuery oczywiście.

Answer 6

jQuery mobile zapewnia to:

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