更改ListView的搜索栏输入类型 [英] Change ListView Search Field Input Type

问题描述

我不知道我怎样才能改变列表视图输入字段的号码类型。我试过这样：

I'm wondering how I can change the type of the listview-input field to number. I've tried this:

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

但结果是不会改变。任何想法？

But the result isn't changing. Any ideas?

推荐答案

您将无法更改键入输入属性的运行时间，但你可以克隆元素，改变克隆的属性，然后替换为克隆现有的元素。您还没有选择任何东西，因为jQuery Mobile的增加了一个形式与滤波器输入作为同级的列表视图小部件，而不是作为一个后代。

You won't be able to change the type attribute of an input run-time but you can clone the element, change the clone's attributes, and then replace the existing element with the clone. You also weren't selecting anything, because jQuery Mobile adds a form with the filter input as a sibling to the listview widget, not as a descendant.​

//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，所以你可以看到插件的列表视图之间的关系和它相关的过滤器输入：

Here is some sample HTML so you can see the relationship between the listview widget and it's associated filter input:

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

这篇关于更改ListView的搜索栏输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！