JavaScript에서 HTML 양식 요소의 포커스 설정

1. JavaScript로 입력에 초점 설정
2. JavaScript로 텍스트 영역에 포커스 설정
3. JavaScript로 선택 상자 또는 드롭 다운에서 포커스 설정

사용자 입력 필드에 초점을 맞추는 것은 필드를 클릭하지 않고도 계속 입력 할 수있는 UI / UX 기능입니다. 특히 양식이 길고 입력 필드가 많은 경우 양식 필드에 동적으로 포커스를 적용해야 할 수 있습니다. 양식 필드에 유효성 검사 오류가있는 경우 사용자가 이러한 시나리오에서 필드를 파악하기 어렵습니다. 따라서 오류 필드를 확인하고 자동으로 스크롤하는 동안 JavaScript의 필드에 포커스를 설정하면 오류가 발생한 위치를 알아내는 데 시간을 낭비하는 대신 사용자에게 직접 오류를 나타냅니다. JavaScript에는.focus()메소드가 있습니다. 이것들을 다음에 어떻게 적용 할 수 있는지 봅시다.

JavaScript로 입력에 초점 설정

입력 필드에 초점을 맞추려면 먼저 필드를 선택해야합니다. 이를 수행하는 다양한 방법이 있습니다. 다음 방법 중 하나를 사용할 수 있습니다.

• document.getElementById(): ID를 기준으로 요소를 쿼리합니다. 일반적으로 id는 고유하므로getElementById()함수는 고유하게 요소를 반환합니다. 동일한 ID를 가진 요소가 더 많은 경우 지정된 ID를 가진 첫 번째 요소를 반환합니다.
• document.getElementsByClassName(): 클래스 이름에 따라 요소를 선택합니다. 일반적으로 기준을 한정하는 요소의 배열을 반환합니다.
• querySelector(): JavaScript 메소드는 ID, 클래스 이름 또는 HTML 요소의 태그를 사용하여 요소를 선택합니다. 이 함수는 매개 변수로 전달 된 기준을 충족하는 단일 HTML 요소를 리턴합니다. 이 기사에서는 표현의 단순화를 위해getElementById()함수를 사용합니다. 요소가 선택되면.focus()메서드를 사용하여 요소에 포커스를 설정할 수 있습니다. 다음은.focus의 구문입니다.

document.getElementById('input-id').focus();

입력 필드에 초점 설정

다음 코드 세트는 페이지로드시 입력 필드에 초점을 맞 춥니 다.

<input id="username-input" type="text" name="username">

window.onload = function() {
  document.getElementById('username-input').focus();
}

HTML 양식의 입력 필드에 포커스 설정

입력 요소가 양식의 일부인 경우getElementById()를 사용하여 요소를 쿼리하는 대신 양식 이름 참조를 사용할 수 있습니다. 사용 구문은 다음과 같습니다.

document.<Form name>.<Field name>.focus();

예를 들어 입력 필드가있는 로그인 양식이 있다고 가정합니다. 다음 코드를 적용하여 입력 필드의 포커스를 설정할 수 있습니다. 코드는 사용자 이름 입력 필드에 초점을설정합니다. 다음 코드가 작동하도록 양식 이름과 필드 이름을 사용하는 동안주의해야 할 사항이 거의 없습니다.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>

window.onload = function() {
  document.LoginForm.UserName.focus();
}

비고

• 양식에서 입력의 초점을 설정하는 동안 HTML 양식과 대상 필드에 name 속성을 지정해야합니다. 이름을 지정하지 않으면 요소를 쿼리하기가 어렵습니다.
• 이 방법은 하이픈이있는 태그 이름을 지원하지 않습니다. 따라서 HTML 양식 또는 요소에 할당 된 이름은 낙타 대문자 (예 :UserName) 또는 소문자 (예 : 사용자 이름) 여야합니다.
• 입력, 텍스트 영역 등과 같은 많은 필드가있는 더 긴 양식의 경우 브라우저가 포커스가있는 HTML 요소를보기로 자동 스크롤하도록 요소에 scroll 속성을 설정하는 것이 좋습니다. 사용자가 예상하는 의도 된 동작입니다. 그렇지 않으면 양식이 잘못된 이유를 궁금해하게됩니다.

document.getElementById("myButton").focus({preventScroll:false});

JavaScript로 텍스트 영역에 포커스 설정

.focus()함수를 사용하여 텍스트 영역에 포커스를 설정할 수 있습니다. 일반적으로 텍스트 영역에 초점을 맞추려면document.getElementById("my-text-area").focus()를 사용합니다. 입력 필드에서.focus()함수를 사용하는 것과 유사합니다. HTML 양식 태그 내에서 텍스트 영역을 사용하려는 경우 텍스트 영역 이름과 함께 양식 이름 참조를 적용하여 초점을 맞출 수 있습니다. 다음 코드를 참조하십시오.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>

window.onload = function() {
  document.LoginForm.description.focus();
}

이 방법에서는 양식과 대상 HTML 요소에 이름을 지정해야합니다. 요소 이름 지정 규칙은 입력 필드의 규칙과 동일합니다.

JavaScript로 선택 상자 또는 드롭 다운에서 포커스 설정

.focus()메서드는 선택 상자 또는 드롭 다운에서 작동합니다. 양식 내에서 사용되는 경우document.FormName.SelectBoxName.focus()를 사용하여 드롭 다운에 초점을 설정할 수 있습니다. 다음은 사용법을 설명하는 코드입니다.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.LoginForm.occupationSelect.focus();
}