jquery - 更改 ListView 搜索字段输入类型

Question

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

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

但结果并没有改变。有任何想法吗？

Answer 1

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

//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>