ListView 검색 필드 입력 유형 변경

Question

listview 입력 필드의 유형을 number로 변경할 수있는 방법이 궁금합니다. 나는 이것을 시도했다 :

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

그러나 결과는 바뀌지 않는다. 어떤 아이디어?

Answer 1

입력 런타임의 type 특성을 변경할 수 없지만 요소를 복제하고 복제 특성을 변경 한 다음 기존 요소를 복제본으로 바꿀 수는 있습니다. jQuery를 모바일하지 후손 같이 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>