2012-02-09 4 views
5

iScroll4 플러그인 (http://cubiq.org/iscroll-4/)을 사용하여 브라우저의 뷰포트 높이의 80 %보다 긴 페이지에 스크롤바를 추가했습니다. 어떤 이유로 (그리고이 경우에만) 내가 그것을 추가하고 입력을 클릭하려고하면, 그것은 선택되지 않을 것입니다. 레이블을 클릭하기 만하면 입력이 선택됩니다.입력을 클릭 할 수없는 이유는 무엇입니까?

iScroll4 및 선택 가능한 입력을 사용하려면 어떻게해야합니까?

+1

이상하게도'input' 요소를 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴를 닫을 때라도 해당 요소로 포커스가 이동하지만 클릭하지는 않습니다. –

+0

예, 마우스 오른쪽 버튼으로 클릭하고 레이블을 클릭하면 작동하지만 나에게도 왼쪽 클릭하지 마십시오. – Atadj

+0

마크 업과 관련이있을 수 있습니다. 레이블 태그 안에 입력을 중첩하면 안됩니다. 마크 업이 동적입니까? 어쩌면 중첩 된 태그의 수를 줄이는 방법을 고려해야합니다. –

답변

12

이 솔루션

myScroll = new iScroll('wrapper', {}); 

    myScroll.options.onBeforeScrollStart = function(e) {     
     var target = e.target; 

     while (target.nodeType != 1) target = target.parentNode; 
     if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){ 
      e.preventDefault(); 
     } 
    } 
+1

감사합니다! 매력처럼 일했습니다! – Atadj

+1

예! 이것은 나를 위해 일한다. – kaleazy

+0

WOOOOOOOOOO! +1 감사합니다. @ darryn.ten이 질문에 싫지만, 왜 이것이 효과가 있었는지 간략하게 설명해주십시오. -/시간이 좀 있으면. 다시 한 번 감사드립니다! – Red2678

4
$('input[type=text]').bind('touchstart click', function(){ 
    $(this).focus(); 
}); 
0
var myScroll; 
function loaded() { 
    myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' }); 

    myScroll.options.onBeforeScrollStart = function(e) {     
     var target = e.target; 

     while (target.nodeType != 1) target = target.parentNode; 
     if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){ 
      e.preventDefault(); 
     } 
    } 
} 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

document.addEventListener('DOMContentLoaded', loaded, false); 
0

나는 버전 5.1.2를 사용하고이 일을보십시오.

window.myScroll = new IScroll ('#iscroll-wrapper', 
    probeType: 3, 
    mouseWheel: true, 
    scrollbars: true, 
    bounce: true, 
    keyBindings: true, 
    invertWheelDirection: false, 
    momentum: true, 
    fadeScrollbars: false, 
    interactiveScrollbars: true, 
    resizeScrollbars: true, 
    shrinkScrollbars: false, 
    click: false, 
    preventDefaultException: { tagName:/.*/ } 
} 
관련 문제