2012-03-05 3 views
2

iOS 웹 페이지에서 양식을 채울 때 실제 키보드의 탭 키처럼 작동하는 다음 및 이전 버튼이 키보드에 있습니다. 우리는 PhoneGap을 사용하는 앱으로 구현 한 웹 애플리케이션을 가지고 있으며, Next와 Previous 버튼은 과거 체크 박스가없는 것처럼 건너 뜁니다.이전/다음 버튼을 iOS의 확인란에서 사용할 수 있습니다.

iOS의 PhoneGap/UIWebView/Safari를 사용하여 다음 및 이전 버튼을 사용할 수있는 방법이 있습니까?

+0

웹 전용 응용 프로그램에서 같은 문제가 있습니다. PhoneGap을 사용하지 않습니다. 이 문제를 해결 했습니까? –

+0

@ JosiahSprague 기본적으로 사과가 UIWebView 컨트롤을 수정하기 전까지 기다리지 말고는이 문제에 대한 해결책이 없습니다. 또한 나는 고객이 거짓말을하고 있다는 것을 알았고, 결코 웹 사이트 버전에서 일하지 않았다. – joshuahealy

+0

일부 정보가 잘못되었음을 알게 된 수정 된 질문 – joshuahealy

답변

2

HTML 만 사용하여 시뮬레이션 할 수 있습니다.

확인란 앞에 텍스트 입력 요소를 삽입하십시오. JavaScript를 추가하여 입력에 포커스가있을 때 키를 누르면 체크 상자 상태가 변경됩니다.

여기 a jsbin example입니다. edit the source입니다. - (jsbin 코드 또는 iframe에 어떤 상호 작용을해야합니다) jsbin의 편집 모드에서 아이폰 OS 6 힘이-닫 입력의 긴 터치를 사용하여 선택한 텍스트 및

  • <fieldset>를 사용하지 않는이 예제에 대한 참고 사항 항상 캐럿을 숨 깁니다 (이 상황에서는 유용하지만 들리지는 않습니다!). 같은 (하지만 난 정말 그것으로 보지 않았다, 너무 많은 번거 로움 때문에 그것을보고하지 않았다.)으로 인해 나쁜 사파리의 버그가 나에게 보이는

  • 때문에 작동하지 않는 <option> 요소를 사용하여 visibility:hidden; 아이디어 사용자가 옵션을 터치하면 키보드가 숨겨집니다.

  • 집중된 체크 박스에 사용할 좋은 스타일을 찾는 데 많은 시간을 할애하지 않았습니다. 누군가가 뭔가 좋은 점이 있으면 의견을 말하십시오.

  • 깜박이는 캐럿을 숨기지 않는 아이디어를 얻으려면 jsbin 예제에 몇 가지 쓰레기가 있습니다. 나는 caret를 숨기기위한 적절한 솔루션이 있다면 관심이있을 것이다.

  • iOS 기기에만이 수정 사항을 적용하려면 브라우저 스니핑이 필요합니다.

  • 이것은 표준 IOS UI 동작이 아니므로 다른 앱으로 이동할 때 사용자를 혼란스럽게하거나 다른 부정적인 영향을 줄 수 있습니다. 솔루션은 Mobile Safari의 향후 릴리스에서 쉽게 깨질 수 있습니다.

  • 나는 캐럿을 숨기는 몇 가지 다른 방법을 시도했으며, 가장 효과적인 방법은 -webkit-transform: scale(0.01); transform: scale(0.01);을 사용하는 것 같습니다. font-size 사용 : 1px; 거의 작동하지만 입력이 초점을 맞출 때 iPhone이 확대/축소 (테스트 된 iPad iOS5 및 확대/축소되지 않았고 iPhone iOS6 테스트 및 확대)되었습니다.

+1

이것은 가능한 해결 방법이지만 우리가 생각해 낸 해결책은 장치의 기본 동작과 다른 점은 고객에게 나쁜 생각이었습니다. – joshuahealy

+0

Android에서도 작동하려면 몇 가지 변경이 필요합니다. 입력의 px 높이가 작고 (2 픽셀이 작동하지 않는 경우) 키보드 캡처가 특히 키보드에 표시되지 않으며 키보드 캡처가 키 누르기가 아닌 keydown에 있어야합니다 (http://jsbin.com/ulapab/2 참조). – robocat

0

짧은 대답은 "기능"입니다. 애플이 체크 ​​박스를 전환하기 위해 어떤 버튼을 눌러야하는지 사람들이 혼란 스럽기를 원하지 않기 때문일 수도있다.

관련 문제