개발자
ios safari Mobile input focus 시 키보드가 올라오지 않습니다.
현재 React + Typescript로 모바일 웹을 개발하고 있습니다. 페이지가 처음으로 렌더링 시 input에 focus를 줘서 키패드가 올라오도록 구현하고 싶습니다. 하지만 ios safari mobile 환경에서 useRef를 사용하여 focus를 주니 focus는 잘 작동하지만 키패드가 올라오지 않고 있습니다. 찾아보니 IOS에서 정책상의 문제로 막아놨다고 합니다만 다른 서비스의 모바일 웹 래퍼런스를 봤을 때 제가 원하는 기능을 작동하는 곳이 몇 곳 있었습니다. 혹시 구현할 수 있는 방법이 있을까요? 시도해봤던 방법으로는 사용자와의 인터렉션을 통해 가능하다고 IOS의 정책에 나와있어서 hidden으로 숨겨놓은 버튼을 하나 추가하여 click event에 focus를 주도록 하고 렌더링 시 클릭 이벤트를 호출해봤었습니다. 아쉽게도 원하는대로 동작은 안했지만.. 도움 주시면 감사하겠습니다.
1/** @jsxImportSource @emotion/react */
2import { css } from '@emotion/react';
3
4import Container from '../../components/layout/Container';
5import TextField from '../../components/ui/fields/TextField';
6import React, { useEffect, useRef, useState } from 'react';
7
8const ContactForm = () => {
9 const [phoneNumber, setPhoneNumber] = useState('');
10 const inputRef = useRef<HTMLInputElement>(null);
11
12 useEffect(() => {
13 inputRef.current?.focus();
14 }, []);
15
16 return (
17 <Container
18 >
19 <TextField
20 value={phoneNumber}
21 onChange={(event) => {
22 setPhoneNumber(event.target.value);
23 }}
24 ref={inputRef}
25 width='100%'
26 type='tel'
27 maxLength={11}
28 placeholder='휴대폰 번호를 입력해주세요.'
29 />
30 </Container>
31 );
32};
33
34export default ContactForm;
답변 2
autofocus를 사용해보시겠어요? 저도 같은 경우가 있었는데, autofocus를 사용했을 때 원하는 결과대로 동작했습니다.
고윤태
작성자
마야크루 프론트엔드 개발자 • 2023년 06월 29일
autofocus로 갑자기 동작하는 행운을 얻었네요 답글 덕에 혹시나 하고 시도해봤는데 감사합니다!
swgtgwxd45
. • 2024년 03월 02일
저도 같은 고민인데 input 엘리먼트에 autoFocus는 있고 autofocus는 없는데 autofocus는 어떻게 사용하고 계신걸까요?
iOS에서는 사용자 인터랙션 없이 프로그래매틱하게 input 요소에 focus를 주어서 키보드를 올리는 것을 제한하고 있습니다. 따라서, 이를 해결하는 정확한 방법은 현재까지는 없습니다. 그러나, 다른 웹사이트에서 원하는 동작을 발견하였다면 그들이 사용하는 방법을 찾아보는 것이 유용할 수 있습니다. 이를 위해서는 해당 웹사이트의 소스코드를 직접 확인하거나, 공식 문서를 통해 해당 웹사이트가 어떤 라이브러리나 기술을 사용하고 있는지 확인하는 것이 필요합니다. 아래에 iOS에서 `focus()` 이슈를 해결하기 위해 시도해볼 수 있는 몇 가지 방법을 제공하겠습니다. #1 `setTimeout`을 사용해서 focus를 지연시키는 방법입니다. 이는 다음과 같이 구현할 수 있습니다: #2 인풋필드에 `autoFocus={true}` 속성을 주는 방법도 있습니다. 그러나 이 방법들이 모두 정확하게 작동할 것이라는 보장은 없습니다. 아이폰의 경우, 웹 브라우저에 따라 동작 방식이 다르므로 iOS에서 정상적으로 작동하는지 반드시 확인해야 합니다. 흔히 이런 문제를 해결하기 위해 UX를 조금 바꾸어, 사용자에게 명시적으로 터치/클릭을 요구하는 방법을 사용하기도 합니다. 이를 통해 사용자 인터랙션에 의해 키보드가 올라오게 하는 것이 보다 확실한 해결책일 수 있습니다.
1#1
2useEffect(() => {
3 setTimeout(() => {
4 inputRef.current?.focus();
5 }, 0);
6}, []);
7
8#2
9<TextField
10 autoFocus={true}
11 value={phoneNumber}
12 onChange={(event) => {
13 setPhoneNumber(event.target.value);
14 }}
15 ref={inputRef}
16 width='100%'
17 type='tel'
18 maxLength={11}
19 placeholder='휴대폰 번호를 입력해주세요.'
20/>커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!