Umieszczanie obrazu na klikalnym polu tekstowym w przypadku ipad (Tworzenie typu wejścia wyszukiwania dla systemu iOS)

Question

Próbuję przeprowadzić symulację HTML5 input type='search' przy użyciu javascript. Moim celem jest, aby coś takiego:

Przede wszystkim będę określić, dlaczego nie używać HTML5 Szukaj typ wejścia bezpośrednio. W przypadku iPada wymieniony typ wejścia pokazuje zaokrąglony narożnik pola tekstowego, a wszystkie inne funkcje wymagane w przypadku natywnego pola wprowadzania wyszukiwania wyglądają podobnie do iOS, z wyjątkiem małej ikony krzyżyka (x) w rogu pola tekstowego, gdy użytkownik wpisze trochę tekstu w polu wyszukiwania.

Próbowałem wszystkiego - Umieszczenie input type przeszukiwanie do <form>, zmiany położenia type='search', itd. Żaden zdaje się przynieść pożądanego efektu (tylko wtedy, gdy aplikacja jest wdrożony na iPad - WebView lub w przeglądarce telefonu).

Przeprowadziłem symulację widżetu za pomocą ikony krzyża i wybiórczo pokazując/ukrywając go na podstawie zawartości pola wyszukiwania. Działa dobrze we wszystkich wersjach desktop Safari (przełączanie narzędzi programistycznych). Jednak gdy próbuję na iPadzie, wpisanie w polu wyszukiwania powoduje wyświetlenie ikony krzyżyka zgodnie z potrzebami, ale nie pozwala na zarejestrowanie zdarzenia dotyku. Wiem też, dlaczego tak się dzieje, ponieważ klawiatura ekranowa jest aktywna, gdy użytkownik pisze, w polu tekstowym wyszukiwania zapobiega się następnemu zdarzeniu dotykowemu. Z tego powodu zapobiega się również dotykaniu ikony krzyżyka.

Mój kod wygląda następująco:

HTML wygląda następująco:

<form id="searchForm"> 
    <div> 
     <input type="search" id="searchBox"> 
     <a id="cross_icon" > 
      <img src="search.png"> 
     </a> 
    </div> 
</form> 

Kod jquery wygląda następująco:

//This function will be triggered on keyup event on searchBox 
showXIcon : function(){ 
       var search = $('#searchBox').val(); 
       if(search.replace(/\s/g, "") === "") { 
        $('#cross_icon').hide(); 
       } else { 
        $('#cross_icon').show(); 
       } 


      }, 
//this function will be called on click on cross_icon 
clearSearchBox: function(){ 
      $('#searchBox').val(''); 
      $('#cross_icon').hide(); 
     }, 

Czy istnieje sposób, aby umożliwić dotykowy zdarzenia na ikona krzyżowa bez wyraźnego zacinania klawiatury ekranowej? W inny sposób lub obejście?

Answer 1

można replikować go z css Oto przykład tego, jak zrobiłbym to

http://jsfiddle.net/LqVNM/6/

HTML:

<div id="search_combo"> 
    <div id="icon-left"><img id="s-img" src="http://c.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/search.png" width="16px" height="16px"/>&#x25BC; </div> 
    <input type="text" name="search" id="search"/> 
    <div id="icon-right"><img id="s-img" src="http://cdn3.iconfinder.com/data/icons/glyph/227/Cancel-128.png" width="16px" height="16px"/></div> 
</div> 

CSS:

#search{ 
    border: 0 none; 
    border-top: 1px solid #666666; 
    border-bottom: 1px solid #666666; 
    height: 25px; 
} 

#search:focus { 
    outline-width: 0; 
} 

#icon-left{ 
    font-size: 10px; 
    color: #666666; 

    display: inline; 
    position: relative; 
    right: -2px; 
    padding: 8px 0px 6px 6px; 
    border: 1px solid #666666; 
    border-right: 0 none; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 

    cursor: pointer; 
} 

#icon-right{  
    display: inline; 
    position: relative; 
    left: -6px; 
    padding: 4px 6px 5px 0; 
    border: 1px solid #666666; 
    border-left: 0 none; 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 

    cursor: pointer; 
} 
@-moz-document url-prefix() { 
    #icon-left{ 
    padding-top: 10px; 
    } 
    #icon-right{ 
    padding-top: 6px; 
    } 
} 

#s-img{ 
    position: relative; 
    top: 3px; 
} 

JQUERY:

$(document).ready(function(){ 
    $("#icon-left").click(function(){ 
     alert("clicked search icon"); 
    }); 

    $("#icon-right").click(function(){ 
     alert("clicked cancel icon"); 
    }); 
}); 

http://jsfiddle.net/LqVNM/6/