페이지가 로드되고 나서 특정 input에 focus 되도록 하려고 하는데 되는 경우와 안되는 경우가 있습니다.
아래는 매우 간단한 HTML 예제 코드입니다.
HTML 코드상으로는 완전히 똑같을지라도, 어떻게 페이지가 전환 되는지에 따라서 차이가 발생합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#message').focus();
});
</script>
</head>
<body>
<input type="text" id="message" autofocus="autofocus" >
</body>
</html>
focus 안되는 경우
사용자가 의도해서 HTTP POST로 페이지가 전환되는 경우 모바일 크롬 브라우저에서는 focus가 안됩니다.
보안상인지 버그인지는 모르겠습니다.
다른 모바일 브라우저에서는 다 되는데 크롬만 안됩니다.
focus 되는 경우
위 경우만 제외하고는 다 됩니다.
- HTTP GET으로 페이지 이동시 focus 됨
- 다른 브라우저에서는 HTTP POST도 모두 focus 됨
- 사용자 의도와 무관한 (예 : 웹소켓 수신시 동작) HTTP POST로 페이지 전환되는 경우 모바일 크롬 브라우저에서 focus 됨
'개발' 카테고리의 다른 글
| iOS 모바일 웹 키보드 팝업시 div 높이 줄이기 (0) | 2024.07.27 |
|---|---|
| HTML 모바일 웹 폰트 크기 커지는 문제 해결 방법 (0) | 2024.07.27 |
| 맥OS 이클립스 에러 - The JVM shared library does not contain the JNI_CreateJavaVM symbol (0) | 2023.10.12 |
| 자바스크립트 동적 ul li 추가 방법 (0) | 2023.01.11 |
| 자바스크립트 ES6 템플릿 리터럴 JSTL과 같이 사용방법 (1) | 2023.01.08 |