[javascript] 입력 폼에서 특정 요소의 포커스 제어하기

11 Dec 2023

javascript

입력 양식(form)을 확인하는 웹 페이지에서 특정 요소에 자동으로 포커스를 설정하려면 JavaScript를 사용하여 이를 수행할 수 있습니다. 포커스를 설정하면 사용자가 페이지를로드할 때 특정 요소에 즉시 입력할 수 있습니다.

1. HTML

입력 폼에서 특정 요소에 포커스를 설정하려면 해당 요소에 id를 지정해야 합니다.

예를 들어, 다음과 같이 id를 사용하여 입력 폼 내 input 요소에 고유한 식별자를 할당할 수 있습니다.

<form>
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username">
</form>

2. JavaScript

이제, JavaScript를 사용하여 위에서 지정한 id를 사용하여 해당 요소에 포커스를 설정합니다.

document.getElementById('username').focus();

위의 코드는 getElementById 함수를 사용하여 id가 “username”인 요소를 찾고, focus 메서드를 사용하여 해당 요소에 포커스를 설정합니다.

3. 예제

다음은 위에서 설명한 기술을 사용하여 자동으로 입력 요소에 포커스를 설정하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>포커스 제어 예제</title>
</head>
<body>

<form>
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username">
</form>

<script>
    document.getElementById('username').focus();
</script>

</body>
</html>

위의 코드를 실행하면 페이지가 로드될 때 사용자 이름 입력란에 자동으로 포커스가 설정됩니다.

마무리

이러한 방법을 사용하면 웹 페이지에서 원하는 입력 요소에 쉽게 포커스를 설정할 수 있습니다. 이것은 사용자 경험을 향상시키고, 웹 페이지의 사용자들이 더 편리하게 이용할 수 있도록 합니다.