JavaScript의 focus 및 blur 메서드

입력 포커스가 무엇인지 이미 알고 계실 것입니다. 포커스를 설정하거나 해제하는 방법도 알고 계실 텐데요: 포커스를 설정하려면 입력 필드를 클릭하고, 해제하려면 다른 곳을 클릭하면 됩니다.

그러나 JavaScript에는 입력 필드에 강제로 포커스를 설정하거나 제거할 수 있는 특별한 메서드들이 존재합니다. 바로 focus 메서드와 blur 메서드입니다.

예제를 통해 그 동작을 살펴보겠습니다. 다음과 같은 입력 필드와 버튼이 있다고 가정해 봅시다:

<input id="elem" value="text">
<input type="submit" id="button">

버튼을 클릭했을 때 입력 필드에 입력 포커스를 설정해 봅시다:

let elem   = document.querySelector('#elem');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
	elem.focus();
});

두 개의 입력 필드가 주어졌습니다. 두 문자를 입력한 후에는 입력 포커스가 두 번째 입력 필드로 이동하고, 해당 필드에 두 문자를 입력한 후에는 포커스가 해제되도록 만들어 보세요.