2010-06-01 6 views
12

iphone webapp을 만들고 입력 필드가있는 페이지가 있습니다. 필드가 나타나면 필드를 가상 키보드 바로 위로 스크롤하고 싶습니다. 입력 포커스 이벤트 (즉, 키보드가 나타나기 직전)에 scrollTo (x, y)를 넣으려고 시도했지만 입력을 시작하면 페이지가 다시 기본 스크롤 사파리 동작을 기반으로 위로 스크롤됩니다. 나는 또한 keypress 이벤트 핸들러를 설정하려고 시도했지만, 스크롤을 막을지라도 키보드를 사용하지 못하게하는 이벤트의 전파를 방지했습니다.iphone safari 가상 키보드에서 입력하는 동안 선택한 요소로 스크롤

가상 키보드가 나타나면 페이지를 특정 위치 (키보드 위의 은 단지)로 강제로 옮길 수있는 방법이 있습니까? 입력을 재개 할 때 페이지가 움직이지 않아도됩니까?

+0

이 문제에 대한 해결책이 없다고 생각합니다. 아이폰의 텍스트 영역 내부의 문제와 비슷합니다. 텍스트 영역은 콘텐츠 편집을 마친 후에 확대/축소 비율이 변경된다는 점에서 훨씬 나쁩니다. (응용 프로그램을 닫지 않고 기본 확대/축소 설정으로 돌아갈 수 없기 때문에 확대/축소를 비활성화하면 웹 앱처럼 동작하기를 원하기 때문에 정말 짜증납니다.). –

+1

@ 위의 의견에 동의하지 않습니다.웹 응용 프로그램을 만드는 경우 모바일 응용 프로그램을 비롯한 다양한 웹 브라우저의 다양한 동작을 고려해야합니다. 그러나 일반적으로 모바일 사파리에서 여기에 설명 된 방식으로 양식에 문제가 없었습니다. @spinlock은 모바일 브라우저 용 webapp을 설계하고 있습니까? 어떤 SDK를 사용하고 있습니까? 대시 코드 또는 기타? 컨테이너 DIV가 스크롤되도록 허용 하시겠습니까? 페이지가 화면에 딱 맞지 만 스크롤하지 않습니까? 이 중 일부는 귀하의 문제를 해결하는 데 도움이 될 수 있습니다. – T9b

+0

안녕하세요 @spinlock은 입력하는 동안 한 곳에서 입력을 고정시킬 수 있었습니까? 미리 감사드립니다 – scanales

답변

3

좋아, 이제껏 보았을 때 가장 심한 해킹 일 수 있지만 아무것도 얻지 못할 것입니다.

텍스트 상자의 위치를 ​​자바 스크립트를 사용하여 동적으로 position:fixed으로 변경하면 텍스트 상자의 위치가 페이지 대신 브라우저 창을 기준으로 변경됩니다. 이것은 아이폰의 스크롤링을 무의미하게 만들어야하고 텍스트 상자는 페이지의 맨 위에 있어야한다. 그런 다음 onBlur, css 위치가 상대적으로 다시 설정됩니다 (다시 원래 장소로 되돌려 놓아야 함).

텍스트 상자 onFocus 뒤에 div를 넣어 실제 사이트 내용을 숨길 수 있습니다. 상단 및 왼쪽 CSS 속성을 사용하여 텍스트 상자의 가운데에 맞출 수 있습니다 (그저 onBlur도 지워야합니다).

0

를 참조 대신 scrollTo (X, Y)의 CSS를 translate3d를 사용하려고 그 때 키보드가 시작이다 브라우저는 창을 요소 자체의 뷰로 이동하려고 시도하고 있습니다.

키보드가 팝업되기 전에 스크롤 막대 위치가 기록되고 있습니다. 그런 다음 브라우저는 기록 된 값에 따라 키보드가 팝업되면 요소를보기 위해 이동해야하는 거리를 계산합니다. 창 위치를 바꿀 때까지. 그래서 그것은 생각하는 자세와 반대로 당신이 설정 한 위치에 상대적으로 창을 움직입니다.

요소를 수동으로 (스크립팅 없음)보기로 스크롤하지 않으면 어떤 현상이 발생합니까?

저는 아이폰 브라우저가 네이티브로하는 것처럼 느껴지고 있습니다. 그렇지 않으면 요소 위치 지정과 관련이있을 수 있습니다. I.E. 브라우저가 요소의 위치를 ​​올바르게 계산할 수 없습니다. 고정 된 위치 컨테이너에있는 경우 (브라우저가 scollTo하려고하면 위치가 이동하기 때문에).

만약 실패하면 scrollTo 함수를 시간 제한 안에 두어 키보드가 올라온 후에 실행하십시오.

관련 문제