JavaScriptのinputイベント
次に学ぶイベントは、
inputと呼ばれます。これは、入力欄や
textareaに新しい文字が入力されるたびに
発生します。例を見てみましょう。次のような入力欄があるとします:
<input id="elem">
キーボードでキーが押されるたびに、 コンソールへ入力欄の現在の内容を 出力してみましょう:
let elem = document.querySelector('#elem');
elem.addEventListener('input', function() {
console.log(this.value);
});
入力欄があります。ここにテキストが入力されます。
テキストの長さが5文字に達したら、
画面にその旨のメッセージを表示してください。
入力欄があります。ここに入力できるのは
5文字までとします。また、段落要素があります。
入力欄への文字入力に合わせて、あと何文字入力できるかを
表示してください。文字数が5文字を超えた場合、
段落にはテキストの長さがどれだけ超過したかを表示してください。