모바일 Safari 자동 초점 텍스트 필드
Mobile Safari에서 지연 기간을 설정 한 후 텍스트 필드에 초점을 맞출 수 없습니다. 문제를 보여주는 몇 가지 예제 코드를 첨부하고 있습니다. 버튼을 클릭하면 .focus ()가 트리거되면 모든 것이 예상대로 작동합니다. setTimeout 함수와 같이 콜백에 포커스를두면 모바일 사파리에서만 실패합니다. 다른 모든 브라우저에서는 지연이 발생하고 포커스가 발생합니다.
혼란스럽게도 "focusin"이벤트는 모바일 사파리에서도 트리거됩니다. 이것은 (그리고 ~ 유사한 ~ 댓글) 모바일 사파리 버그라고 생각하게 만듭니다. 모든 지침이 수락됩니다.
에뮬레이터와 iPhone 3GS / 4 iOS4에서 테스트했습니다.
HTML 예 :
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Autofocus tests</title>
<meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
</head>
<body>
<h1>
Show keyboard without user focus and select text:
</h1>
<p>
<button id='focus-test-button'>
Should focus on input when you click me after .5 second
</button>
<input id='focus-test-input' type='number' value='20'>
</p>
<script type="text/javascript">
//<![CDATA[
var button = document.getElementById('focus-test-button');
var input = document.getElementById('focus-test-input');
input.addEventListener('focusin', function(event) {
console.log('focus');
console.log(event);
});
button.addEventListener('click', function() {
// *** If triggered immediately - functionality occurs as expected
// input.focus();
// *** If called by callback - triggers the focusin event, but does not bring up keyboard or cursor
var t = setTimeout("input.focus();",500);
});
//]]>
</script>
</body>
</html>
~ 유사 ~ 그래서 질문 :
- 프로그래밍 방식으로 입력 필드의 텍스트 선택 iOS 장치 모바일 사파리
- 아이폰 사파리에서 양식 필드에 자동 초점을 맞추는 방법
- set-textbox-focus-in-mobile-safari의 댓글
버그 라기보다는 모바일 사파리의 기능이라고 생각합니다. FastClick 작업에서 동료와 저는 iOS가 호출 스택의 첫 번째 함수가 프로그래밍 방식이 아닌 이벤트에 의해 트리거 된 경우 함수 내에서 다른 요소에 대해서만 포커스가 트리거되도록 허용한다는 것을 발견했습니다. 귀하의 경우 setTimeout새로운 호출 스택 을 시작하는 호출이 시작되고 입력에 초점을 맞추지 못하도록 보안 메커니즘이 시작됩니다.
iOS에서 입력 요소에 포커스를 설정하면 키보드가 나타납니다. 따라서 Google처럼 페이지로드시 입력 요소에 포커스를 설정하는 모든 웹 페이지는 iOS에서 사용하기가 매우 성 가실 것입니다. 나는 애플이 이것을 막기 위해 무언가를해야한다고 결정한 것 같다. 그래서 @DA에 동의하지 않습니다. 이것은 버그가 아닌 기능입니다.
이에 대한 알려진 해결 방법이 없으므로 지연을 사용하는 아이디어를 버려야합니다.
2012 년 8 월 업데이트 :
iOS 5부터는 합성 클릭 이벤트에 의해 트리거 된 핸들러가 입력 요소에 대한 포커스를 트리거 할 수 있습니다. 업데이트 된 FastClick 입력 포커스 예제를 사용해보십시오 .
원래 이벤트가 setTimeout이 아닌 사용자 상호 작용에서 발생한 경우에만 클릭 이벤트를 전달하여 키보드를 올릴 수있었습니다. 결과는 touchend 이벤트에서 키보드를 올릴 수 있지만 여전히 시간 초과에서 발생하지 않는다는 것입니다.
focus ()는 홈 화면에 사이트를 추가하고이 링크로 사이트를 연 경우에만 작동하는 것 같습니다.
Adding to Matt answer. At least on Safari on iOS 5.1, this issue is fixed. Your FastClick works, that is, synthesizing a click event won't fail focus. However this does not help people who want their single focus() code to work on all iOS versions, sigh.
I was capable of making .focus() work by attaching it to two separate events in the events map but it's kind of hacky.
After adding FastClick.js, this is what happens in iOS: .focus() only works when its activated by a function that is attached to an event. BUT focus is also an event in mobile safari's event map that is actually called when you use jQuery's .focus(). SO you can be redundant and attach another .focus() on the focus event of the object to make certain that it pulls through. This works especially well when you're creating an input in the DOM. I like programming for MeteorJS lately, this is what the solution looks like there:
Template.templateName.events({
"click button":function(){
Session.set("makeButtonVisible",true);
$("input.created").focus();
},
"focus input.created":function(){
$("input.created").focus();
}
});
Hopefully this is useful to someone out there, took me like two hours to figure this one out.
EDIT: Well, for MeteorJS in particular, you can't use Template.templateName.rendered function either because the .focus() must be invoked from an event. BUT for some reason when you add an input through jQuery you can focus on it inside the event. Guess that's the way to go. This is what I ended up doing:
Template.templateName.events({
"click button":function(){
$("body").append("<input class='created' type='tel'>");
$("input.created").focus();
}
});
You answered yourself. You need just trigger if you use Jquery. Change focus() on trigger("focus"); in any part of your code.
$("#searchField").trigger("focus");
ReferenceURL : https://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field
'programing' 카테고리의 다른 글
| Go 구조체에서 멤버를 초기화하는 방법 (0) | 2021.01.15 |
|---|---|
| 힘내는 내가 원점보다 얼마나 많은 커밋인지 보여주지 않는다. (0) | 2021.01.15 |
| 시간대가없는 PostgreSQL 변경 유형 타임 스탬프-> 시간대 포함 (0) | 2021.01.15 |
| bash에서 :-( 콜론 대시) 사용 (0) | 2021.01.15 |
| 다른 파이썬 로그 핸들러에 대해 다른 수준을 설정하는 방법 (0) | 2021.01.15 |