폼의 요소에 포커스 주기 - JavaScript
폼 입력에서 JavaScript 로 포커스를 임의로 조정해야 할 필요가 종종 있는데, 예상치 못한 상황이 발생할 수 있어 기록해 둔다.
폼의 첫번째 요소에 포커스 주기
<form id="myform" action="save.php" method="post">
<input name="firstname">
<input name="lastname">
<input name="age">
</form>
이러한 폼이 있을때,
var aFormElement = document.getElementById("myform");
aFormElement.elements[0].focus();
이렇게 하면 대부분 문제 없이 첫번째 요소로 포커스를 옮길 수 있다.
하지만, 다음과 같이 폼의 첫번째 요소로 hidden
타입이 설정되어 있을 경우에는, 이 보이지 않는 요소로 포커스가 옮겨지게 되어 화면상에서는 아무런 변화가 없는 것 처럼 나타난다.
<form action="save.php" method="post">
<input type="hidden" name="goto" value="home.php">
<input name="firstname">
<input name="lastname">
<input name="age">
</form>
이럴 때에는 다음과 같이 명확하게 hidden
요소를 제외하고 선택해 준다.
var aFormElement = document.getElementById("myform");
aFormElement.querySelectorAll('input:not([type=hidden])')[0].focus();
이 방법이 복잡할 경우 간단하게 hidden
타입의 요소를 폼의 가장 뒤에 두는 방법도 있다.
폼의 마지막 요소에 포커스 주기
이를 응용하면 마지막 요소에 포커스를 주는 방법도 간단히 해결된다.
var aFormElement = document.getElementById("myform");
var fromChildElements = aFormElement.querySelectorAll('input:not([type=hidden])');
var firstElement = fromChildElements[0];
var lastElement = fromChildElements[fromChildElements.length - 1];
firstElement.focus();
lastElement.focus();
필요한 요소만 선택하여 지정하기 (응용예제)
aFormElement.querySelectorAll('input:not([type=hidden]), select, textarea, button, [tabindex]:not([tabindex="-1"])')[0].focus();
이런식으로 정확하게 필요한 요소만 지정해서 사용할 수도 있다.
폼 리셋하기
var aFormElement = document.getElementById("myform");
aFormElement.reset();
Vue 의 v-bind 와 함께 사용한다면, 명시적으로 값을 비워줘야 제대로 동작한다. 브라우저가 값을 기억하는 경우에도 마찬가지로 명시적으로 리셋해 주면 되겠다.
var aFormElement = document.getElementById("myform");
this.firstname = '';
this.lastname = '';
this.age = '';
aFormElement.reset();
Responses
Leave a response to @richard