Jquery UI + 모바일 자동 완성 문제

자동 완성을 사용하면 추천 입력이 표시됩니다. 아래에 버튼이있는 곳을 클릭하면 제안 사항 대신 버튼이 클릭됩니다. 나는 누군가가 도움을 줄 수 있는지 확인하기 위해 문제가있는 JS 바이올린을 준비했습니다Jquery UI + 모바일 자동 완성 문제

...

http://jsfiddle.net/XuZBt/8/

그래서이하지 않는 내가 정상에있을 완전 자동 설정할 수 있습니다 어쨌든 있나요 우연히 있다?

주셔서 감사 Z-인덱스가 잘못 어떤 이유로

출처

2012-08-04 LmC

. 이 jsFiddle에 FF에서 작동 :

<input type="text" id="personHomeNum" data-autofill="N/A" data-stat="KNOWN" style="z-index: 1" /> 
<input type="button" value="Validate" id="validation_btn" style="z-index: 1"/>

을이 작동하는 것 같다 몇 가지 이유 : 몇 약간의 CSS 비틀기와

http://jsfiddle.net/XuZBt/20/

출처

2012-08-04 15:01:06

이 나던 날 일반적으로 비록 버튼을 클릭 할 수는? – LmC

그건 이상한데, 나는 FF로 할 수있다 : http://jsfiddle.net/XuZBt/17/ –

http://jsfiddle.net/XuZBt/18/ 거기에서 일한다. 나는 그것을 – LmC

우리가 버튼 위에 자동 완성 위젯을 설정할 수 있습니다. 버튼 z-index은 data-role="page"과 .ui-autocomplete 요소가 형제이기 때문에 승격 data-role="page"z-index으로 지정됩니다. data-role="page" 요소 안에있는 버튼의 z-index을 변경하려고하면 자동 완성 위젯과 관련하여 대부분의 브라우저에 영향을주지 않습니다 (일부 브라우저에서는 작동하지만 다른 브라우저에서는 작동하지 않음). 여기

/*this rule makes the links in the autocomplete list block elements so they expand to fill their parents*/ 
.ui-autocomplete.ui-menu .ui-menu-item a { 
    display : block; 
} 

/*this rule just sets the autocomplete menu above the data-role="page" element*/ 
.ui-autocomplete.ui-menu { 
    z-index : 10; 
}

데모입니다 : 여기

은 CSS의 모든 필요하다 http://jsfiddle.net/XuZBt/21/

출처

2012-08-04 17:10:59 Jasper

Jquery UI + 모바일 자동 완성 문제

답변

관련 문제