搜索清除按钮不会出现在 iOS 中
Posted
技术标签:
【中文标题】搜索清除按钮不会出现在 iOS 中【英文标题】：Search clear button does not appear in iOS 【发布时间】：2014-01-11 04:38:21 【问题描述】：我有一个应用程序可以对邮政编码进行一些搜索，并且在大多数情况下它工作正常。但是，我注意到出现在字段右侧的清除图标并没有出现在某些浏览器中。
所以我创建了一个基本的 html 标记来测试一些浏览器。这没有任何随附的 CSS 样式表。
<input type="search" />
在 ios 7 Safari 和 Chrome 下，这不会出现。 在 Mac 上的 Safari 7.0.1 和 Chrome 31.0.1650.63 下，它运行得非常好。 在 Firefox 26 for Mac 下，这不会出现。
我想要它的主要原因是因为网络应用程序将主要在移动平台上运行，并且快速删除邮政编码将非常方便继续使用。
我尝试的另一种策略是在字段处于焦点时选择整个文本。
<input id="orig" type="search" value="" placeholder="Origin" onclick="this.select()">
这适用于 Mac 上的 Firefox/Safari/Chrome，但不适用于 iOS。
我真的不介意上述哪种方法有效，只要我能快速从搜索字段中删除旧文本即可。是否有我可以使用的通用标记适用于所有浏览器？
【问题讨论】：
【参考方案1】：我已经使用 Jquery mobile 使用以下代码解决了我的查询：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Insert Page Title Here</h1>
</div>
<div data-role="content">
<label for="search-enhanced">Search:</label>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
我希望这对遇到同样问题的人有所帮助。
【讨论】：
以上是关于搜索清除按钮不会出现在 iOS 中的主要内容，如果未能解决你的问题，请参考以下文章
搜索之后，p：dataTable将不会更新，除非调用两次搜索或者输入和清除过滤器中的某些内容
清除 LiveSearchGridPanel 中的搜索文本字段