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

Question

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

首先,我将指出为什么我没有直接使用HTML5搜索输入类型.在iPad的情况下,提到的输入类型显示圆角文本框和本机搜索输入框所需的所有其他功能看起来与iOS相似,但当用户键入某些文本时,文本框一角的小十字(x)图标除外进入搜索框.

我尝试了所有方法 - 将输入类型搜索放入a <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;
}

查询：

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

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

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