input type='search'JavaScriptを使用してHTML5をシミュレートしようとしています。私の目的は、次のようなものを作ることです：
まず、HTML5 Search の入力型を直接使用しなかった理由を説明します。iPad の場合、前述の入力タイプは角の丸いテキスト ボックスを示し、ネイティブの検索入力ボックスに必要な他のすべての機能は、ユーザーがテキストを入力するときにテキスト ボックスの角にある小さな十字 (x) アイコンを除いて、iOS と似ています。検索ボックスに。
私はすべてを試しました - 入力タイプの検索を に入れたり<form>、 を再配置しtype='search'たりしました。目的の効果が得られないようです (アプリが ipad - webview またはモバイルブラウザーに展開されている場合のみ)。
そこで、クロス アイコンを使用してウィジェットをシミュレートし、検索ボックス内のコンテンツに基づいてウィジェットを選択的に表示/非表示にしました。のすべてのバージョンで正常に動作します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();
},
画面上のキーボードを明示的にぼかすことなく、十字アイコンのタッチイベントを許可する方法はありますか? 他の方法または回避策はありますか？