폼의 요소에 포커스 주기 - 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();