jquery - 在 ipad 的情况下使位于文本框上的图像可点击(为 iOS 创建 HTML5 搜索输入类型)

Question

我正在尝试模拟 HTML5 input type='search'使用javascript。我的目标是做这样的事情:

首先，我会说明为什么我没有直接使用 HTML5 搜索输入类型。对于 iPad，上述输入类型显示圆角文本框和 native 搜索输入框所需的所有其他功能看起来与 iOS 相似，除了用户键入某些文本时文本框角上的小十字 (x) 图标进入搜索框。

我尝试了一切 - 将输入类型搜索放入 <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();
        },

有没有办法在不显式模糊屏幕键盘的情况下允许十字图标上的触摸事件？还有其他方法或解决方法吗？

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/