更改 ListView 搜索字段输入类型答案

【问题标题】：Change ListView Search Field Input Type更改 ListView 搜索字段输入类型
【发布时间】：2012-08-15 15:45:48
【问题描述】：

我想知道如何将 listview-input 字段的类型更改为数字。我试过这个：

$("#list").find("input:first").attr("type","number");
$("#list").listview("refresh");

但结果并没有改变。有什么想法吗？

【问题讨论】：

标签： jquery html listview jquery-mobile

【解决方案1】：

您将无法更改输入运行时的type 属性，但您可以克隆元素，更改克隆的属性，然后用克隆替换现有元素。您也没有选择任何内容，因为 jQuery Mobile 将带有过滤器输入的表单添加为 listview 小部件的兄弟，而不是后代。

//run code when pseudo-pages initialize
$(document).on('pageinit', '.ui-page', function () {

    //find the filter input on this pseudo-page
    var $filterInput = $(this).find('.ui-listview').prev('.ui-listview-filter').find('input'),

        //create a clone of the filter input on this pseudo-page
        $clone       = $filterInput.clone(true);

    //replace the original input with the clone
    $filterInput.replaceWith($clone.attr('type', 'number'));
});

这是一个演示：http://jsfiddle.net/XEEsL/

这里是一些示例 HTML，因此您可以看到 listview 小部件与其关联的过滤器输入之间的关系：

<form class="ui-listview-filter ui-bar-c" role="search">
    <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
        <input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-c" type="number">
        <a href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="c" data-mini="false">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text">clear text</span>
                <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
            </span>
        </a>
    </div>
</form>
<ul data-filter="true" data-role="listview" class="ui-listview">
    <li class="ui-li ui-li-static ui-body-c">1</li>
    <li class="ui-li ui-li-static ui-body-c">2</li>
    <li class="ui-li ui-li-static ui-body-c">3</li>
</ul>

【讨论】：