JavaScript에서 텍스트 필드 포커스

입력 필드가 있다고 가정해 봅시다. 여러분은 이 입력 필드를 클릭할 수 있으며, 그 후에 커서 막대가 깜박이기 시작하고 텍스트를 입력할 수 있게 됩니다.

이 상태를 입력 필드가 현재 입력 포커스를 가지고 있다고 말합니다. 실제로 이는 키보드로 텍스트 입력을 시작하면, 그 텍스트가 현재 입력 포커스를 가진 입력 필드로 들어간다는 것을 의미합니다. 그 후 입력 필드 외부 아무 곳이나 클릭하면, 이 입력 필드는 포커스를 잃게 되고 더 이상 텍스트를 입력할 수 없게 됩니다.

입력 필드가 포커스를 얻거나 잃는 순간을 감지하기 위해, JavaScript에는 특별한 이벤트들이 준비되어 있습니다: focus 이벤트는 입력 필드가 포커스를 얻는 것을 감지할 수 있게 해주고, blur 이벤트는 포커스를 잃는 것을 감지할 수 있게 해줍니다. 실제로 시도해 봅시다. 입력 필드가 있다고 가정합니다:

<input id="elem" value="text">

변수에 대한 참조를 얻어옵니다:

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

이제 포커스를 얻을 때 콘솔에 입력 필드의 현재 텍스트가 출력되도록 만들어 봅시다:

elem.addEventListener('focus', function() {
	console.log(elem.value);
});

입력 필드가 주어졌습니다. 포커스를 얻을 때 숫자 1을 쓰고, 포커스를 잃을 때 숫자 2을 쓰세요.

입력 필드가 주어졌습니다. 여기에 숫자를 입력한다고 가정합니다. 포커스를 잃을 때 이 숫자의 제곱을 화면에 출력하세요.

입력 필드가 주어졌으며, 처음에 어떤 텍스트가 들어 있습니다. 입력 필드가 포커스를 얻을 때 이 입력 필드의 내용을 지우세요.