위치 : iOS5에서 고정 입력이 집중 될 때 이동합니다

모바일 응용 프로그램의 상단에 위치 : 고정되어 있으므로 브라우저 상단에 위치하도록 div가 있습니다 (ios 4에서 스크롤하여 아래쪽으로 이동합니다). 벌금). 입력에 초점이 맞춰지고 키보드가 나타나면 div는 페이지의 가운데로 내려갑니다. 스크린 샷을 참조하십시오위치 : iOS5에서 고정 입력이 집중 될 때 이동합니다

http://dbanksdesign.com/ftp/photo_2.PNG

편집 : 여기 는 단순화 된 테스트 페이지입니다 : http://dbanksdesign.com/test/

<body> 
<div class="fixed"><input type="text" /></div> 
<div class="content"></div> 
</body> 

.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; } 
.content { width:100%; height:1000px; background:#efefef; }

출처

2011-11-08 dbanksdesign

'html', 'body' 및'fixed' 요소에 대한 CSS 코드는 무엇입니까? – ScottS

불행하게도 당신은 아마 IOS 작업 할 때 fixed 요소 absolute 위치를 개시 최고입니다. 예, IOS5는 fixed 포지셔닝을 지원한다고 주장하지만 고정 요소 내에 대화 형 컨트롤이있을 때 모든 것이 다운됩니다.

내 switchitoff.net 사이트의 검색 창과 동일한 문제가있었습니다. IOS5에서 페이지가 스크롤되는 동안 검색 상자가 포커스를 얻으면 고정 헤더가 페이지 아래로 뛰어 오릅니다. 다양한 해결 방법을 시도했는데 현재 가지고있는 것은 <div>이며 검색 창 위에 있습니다. 이 <div>을 클릭하면 다음이 발생합니다

페이지가 fixed 헤더는
검색 <input>이 숨겨져있는 검색 창을 포함 absolute
<div>로 변경 상단
로 스크롤 집중됨

위의 단계는 검색 창에 포커스가 없어지면 취소됩니다. 이 솔루션은 검색 상자를 클릭 할 때 헤더가 페이지 아래로 점프하는 것을 방지하지만 더 단순한 사이트의 경우에는 처음부터 절대 위치 지정을 사용하는 것이 좋습니다.

IOS5 및 고정 위치 지정과 관련하여 또 다른 까다로운 문제가 있습니다. 영역에서 body 요소가 스크롤 된 상태에서 클릭 가능한 요소가 스크롤되면 터치 이벤트가 중단 될 수 있습니다.

예를 들어, switchitoff.net에서 대화 형 요소를 뒤로 스크롤 할 때 고정 헤더의 단추가 클릭 해제됩니다. touchstart이 탭을 두드렸을 때조차도 해고되지 않았습니다. 운이 좋게도 onClick은 여전히 효과가있는 것처럼 보였습니다.하지만 지연 때문에 항상 IOS의 최후의 수단이었습니다.

마지막으로 고정 된 머리글을 클릭하고 페이지를 스크롤하는 방법 (IOS5에서)에 유의하십시오. 나는 이것이 정상적인 브라우저에서 고정 된 헤더를 통해 스크롤 휠을 사용할 수있는 방법을 에뮬레이트하는 것을 알고 있지만 확실하게이 패러다임은 터치 UI에 대해 이해가되지 않습니까?

Apple은 고정 요소 처리를 계속 개선 할 예정이지만 그동안 고정 된 영역에 대화 형 항목이 있다면 absolute 위치 지정을 사용하는 것이 더 쉽습니다. 그 일이 훨씬 쉬워 지거나 IOS4로 돌아 간다!

출처

2011-12-01 17:56:02 JohnW

버튼이 클릭 할 수 없게되는 이유는 실제로 내용과 함께 보이지 않게 스크롤 되었기 때문입니다. 그들은 여전히 원래 위치에 있지도 않고 어디에서 보았는지도 볼 수 없습니다.

버튼이 얼마나 이동했는지 추측 할 수 있다면 (보이지 않는 버튼을 클릭하면 정상적으로 작동합니다) 즉, 콘텐츠가 50 픽셀만큼 스크롤 된 경우 버튼에서 50 픽셀 떨어진 곳을 클릭하면 효과가 나타납니다.

내용을 수동으로 스크롤 할 수 있으며 (작은 양으로도) 버튼이 다시 예상대로 작동합니다. 나는이 문제를 해결 해낸 대신 fixed의 absolute를 사용하도록 JohnW의 권고가 사용

출처

2012-02-23 08:14:14

먼저 입력이 onfocus 및 때, 감지 페이지 상단으로 스크롤 요소를 변경하기 위해 bind을 설정 positionabsolute에 : 나는 입력을 포함하는 DIV 상단 막대의 입력 및 textinput-container의 ID textinput을 사용하고

$('#textinput').bind('focus',function(e) { 
    $('html,body').animate({ 
     scrollTop: 0 
    }); 
    $('#textinput-container').css('position','absolute'); 
    $('#textinput-container').css('top','0px'); 
});

참고. 입력이 나는 바닥에 고정 된 바 유사한 솔루션을 사용하고 fixed

$('#textinput').bind('blur',function(e) { 
    $('#textinput-container').css('position','fixed'); 
    $('#textinput-container').css('top','0px'); 
});

에 다시 DIV의 위치를 변경하기 위해 더 이상 초점없는 경우

감지하는 또 다른 바인딩을 설정 페이지의 상단에 고정 된 막대에 대해 코드를 게시해야하지만 테스트하지 않았습니다.

출처

2012-11-01 19:24:23 pablobart

나를 위해 잘 작동합니다. 페이지를 실제로 스크롤하면 초점을 맞추기 만하면됩니다. 그렇지 않으면 깜박임이 있습니다. –

이 솔루션은 저에게 매우 효과적입니다. 모든 코드는 사용자가 텍스트 필드를 두 드릴 때까지 기다린 다음 'jQuerySelector'매개 변수로 식별되는 요소를 '고정'위치에서 '정적'위치로 변경합니다. 텍스트 필드가 포커스를 잃으면 (사용자가 다른 것을 탭한 경우) 요소의 위치가 '고정'으로 다시 변경됩니다.

// toggles the value of 'position' when the text field gains and looses focus 
var togglePositionInResponseToInputFocus = function(jQuerySelector) 
{ 
    // find the input element in question 
    var element = jQuery(jQuerySelector); 

    // if we have the element 
    if (element) { 

     // get the current position value 
     var position = element.css('position'); 

     // toggle the values from fixed to static, and vice versa 
     if (position == 'fixed') { 
      element.css('position', 'static'); 
     } else if (position == 'static') { 
      element.css('position', 'fixed'); 
     } 
    } 
};

그리고 관련 이벤트 핸들러 :

var that = this; 

// called when text field gains focus 
jQuery(that.textfieldSelector).on 
(
    'focusin', 
    function() 
    { 
     togglePositionInResponseToInputFocus(that.jQuerySelector); 
    } 
); 

// called when text field looses focus 
jQuery(that.textfieldSelector).on 
(
    'focusout', 
    function() 
    { 
     togglePositionInResponseToInputFocus(that.jQuerySelector); 
    } 
);

출처

2013-02-28 18:34:12

그냥 초점 당신의 고정 요소를 숨길 후 대한 focusOut에 다시 보여줍니다. 나는 당신의 사용자가 집중할 때 그것을 볼 필요가 없을 것입니다. 나는 이것이 해결책이 아니라는 것을 알고 있지만 더 나은 접근이라고 생각한다. 단순하게 유지하십시오.

출처

2014-02-04 19:20:41 Websitescenes

pablobart의 용액 버전 그러나 위로 스크롤 않고 수정 :

// Absolute position 
$('#your-field').bind('focus',function(e) { 
    setTimeout(function(){ 
     $('section#footer').css('position','absolute'); 
     $('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height()); 
    }, 100); 
}); 

// Back to fixed position 
$('#your-field').bind('focusout',function(e) { 
    $('section#footer').removeAttr('style'); 
});

간단한 CSS : 구간 # 풋터 * {총수 : 고정; 하단 : 0; 왼쪽 : 0; 높이 : 42px} *

출처

2014-04-07 08:56:07 Phil

위치 : iOS5에서 고정 입력이 집중 될 때 이동합니다

답변

관련 문제