kleines 'x' in Textfeld Eingabe auf dem iPhone in MobileSafari?

Question

Ich habe überall ohne Glück dafür gesucht. Wenn Sie auf google.com auf dem iphone gehen, wenn Sie sich auf das Suchfeld konzentrieren, erscheint ein kleines "x" ganz rechts und wenn Sie es berühren, löscht es den aktuellen Wert des Feldes. Jeder weiß, wie man das erreicht?

Answer 1

verwendete ich die Entwicklung Menü in Safari und geändert iPhone den User-Agent. Anzeigen der Quelle auf Google, sieht es aus wie sie ihre html eingestellt haben wie auf den Punkt:

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

und sind mit dieser 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

Eine wirklich gute Ressource für iPhone Web-Entwicklung ist iphonewebdev.

Es scheint jedoch, dass diese besondere Funktion nicht Teil von Apples API ist (zumindest aus meiner Forschung), sondern eine reine Javascript/CSS-Implementierung.

Sie können neu erstellen mit etwas wie folgt aus:

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

Sie sollten die X Stil ein Bild zu sein, so dass es im Inneren des Eingangs einfügt. Und natürlich empfehle ich dringend, ein JavaScript-Framework zu verwenden, wenn Sie können.

Answer 3

Dies ist eine spezielle Art der Eingabe von Apple entwickelt und nicht vom W3C genehmigt. Wenn Sie es verwenden, funktioniert es gut für Browser, die es nicht erkennen.

Es gibt andere Parameter, einschließlich Domain-Namen und Suchergebnisse, so dass der Benutzer seinen Suchverlauf verwenden kann. Google für die Verwendung dieser.

Answer 4

Der Trick ist zu hören/bind event auf mousedown so, dass das click -Ereignis nie ausgelöst wird und das Eingabeelement den Fokus nicht verliert. Wie im obigen Beispiel von Google.

Answer 5

Und das ist meine jQuery-Version, es verbirgt es am Anfang, und wenn der Benutzer löscht, was getippt wird, wird es das "x" entfernen. Auch wenn sie den Text mit der Schaltfläche entfernt haben, wird auch das 'x' ausgeblendet.

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

Die JavaScript-Version ist schneller als die jQuery-Version natürlich.

Answer 6

JQuery Mobile bietet dies:

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