ipadの場合にテキストボックス上でクリック可能な画像を作成する（iOSのHTML5検索入力タイプを作成する）

Question

JavaScriptを使用してHTML5をシミュレートしようとしています。私の目的はこのようなものを作ることです：すべての

まず、私はHTML5を直接入力タイプを検索する使用しなかった理由を指定します。 iPadの場合、上記の入力タイプでは丸みのある角のテキストボックスが表示され、ネイティブの検索入力ボックスに必要な他のすべての機能は、ユーザーがテキストを入力したときにテキストボックスの隅にある小さな十字（x）アイコンを除いてiOSと似ています検索ボックスに入力します。

私はすべて試してみました - （ - WebViewのか、携帯電話のブラウザアプリはiPad上で展開されている場合のみ）なしは、所望の効果をもたらすように思わないtype='search'を再配置、<form>に入力型検索を置く、など。

私は十字アイコンを使ってウィジェットをシミュレートし、検索ボックス内のコンテンツに基づいて選択的に表示/非表示しました。 desktop Safariのすべてのバージョンで正常に動作します（デベロッパーツールを切り替える）。しかし、iPadで試してみると、検索ボックス内に入力すると十字アイコンが表示されますが、タッチイベントを登録することはできません。ユーザーが入力しているときにオンスクリーンキーボードがアクティブであるため、検索テキストボックスで次のタッチイベントが防止されるため、この理由もわかります。これにより、十字アイコンに触れることも防止される。次のように

私のコードは次のとおりです。

HTMLは次のようになります。

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

jqueryのコードは次のようになります。

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

が上のタッチイベントを許可するが方法です。画面上のキーボードを明白にぼかすことなく十字アイコンを使用できますか？それ以外の方法や回避策はありますか？

Answer 1

あなたがここにCSS でそれを複製することができますが、私はそれを行うだろうかの一例である

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/