JavaScript의 input 이벤트

다음으로 우리가 공부할 이벤트는 input입니다. 이 이벤트는 input이나 textarea에 새로운 문자가 입력될 때마다 발생합니다. 예제를 통해 살펴보겠습니다. 다음과 같은 input이 있다고 가정해 봅시다:

<input id="elem">

키보드의 키를 누를 때마다 input의 현재 내용을 콘솔에 출력해 보겠습니다:

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

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

input이 주어져 있습니다. 여기에 텍스트를 입력합니다. 텍스트 길이가 5자에 도달하는 즉시, 화면에 이에 대한 메시지를 출력하세요.

input이 주어져 있습니다. 여기에 5자까지만 입력할 수 있습니다. 또한 문단이 하나 있습니다. input에 문자를 입력하는 동안, 아직 몇 자를 더 입력할 수 있는지 문단에 표시하세요. 문자의 수가 5자를 초과하면, 텍스트 길이가 몇 자 초과되었는지 문단에 출력하세요.