jQuery Mobile 1.4 不恰当地重写搜索 <input> 标签答案

【问题标题】：jQuery Mobile 1.4 rewriting search <input> tag inappropriatelyjQuery Mobile 1.4 不恰当地重写搜索 <input> 标签
【发布时间】：2014-10-15 19:00:56
【问题描述】：

我有一些这样的 HTML：

<div id="search-panel">
    <form>
        <input id="input-catalog-search" name="catlogSearchValue" data-type="search" placeholder="Search...">
    </form>
</div>

当我运行代码并在 firebug 中检查它时，结果是这样的：

<div id="search-panel">
    <form>
         <div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
             <input placeholder="Search..." data-type="search" name="catlogSearchValue" id="input-catalog-search">
             <a class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" aria-hidden="true" tabindex="-1" href="#" title="Clear text">Clear text</a>
         </div>
    </form>
</div>

这没什么大不了的，除了这个移动网站将在 iPad 上大量使用并且缺少 HTML type="search" 导致键盘不显示蓝色搜索按钮和其他非特定于搜索的行为。

我尝试将 type="search" 硬编码到 HTML 中，但如果我这样做，jQuery Mobile 会将 <input> 重写为 type="text"。

我还尝试在页面加载后使用 jQuery prop() 修改类型，但这也没有触发搜索按钮。

有什么建议吗？

【问题讨论】：

标签： jquery html ipad jquery-mobile search

【解决方案1】：

注意：jQM 将类型search 替换为text 以隐藏原生清除按钮。如果您仍想显示“搜索”按钮，则必须隐藏 原生清除按钮，以便使用 CSS 进行搜索输入。

.prop("type", "search") 如果你在合适的时候调用它应该可以工作。例如，您不应该在ready() 上调用它并避免使用它。相反，请使用页面容器事件。

如果您执行以下操作，它将起作用，但是请注意，您还需要将action 和method 属性添加到form。

$(document).on("pagecreate", function () {
  $("inputID").prop("type", "search");
});

所有小部件创建完成后，pagecreate 事件被触发。您也可以使用pagecontainershow，因为它会在页面可见时触发。

Demo

【讨论】：