8

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

在此处输入图像描述

首先，我将说明为什么我没有直接使用 HTML5 Search 输入类型。在 iPad 的情况下，提到的输入类型显示圆角文本框和本机搜索输入框所需的所有其他功能，除了用户输入某些文本时文本框角上的小十字 (x) 图标外，与 iOS 相似进入搜索框。

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

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

4

1 回答 1

2

你可以用 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/

于 2013-05-22T17:02:01.220 回答