2024年11月のおすすめスクール

JavaScriptでイベントonkeydown、onkeyup、onchange

  • URLをコピーしました!
目次

キーボードのキーが押されたとのイベントonkeydown、onkeyup

キーが押されたときにイベントが発生するのはwindow.onkeydownプロパティかdocument.onkeydownプロパティに関数を入れてあげればよい。

onkeydown = function(e) { alert(e.key); }

またはアロー関数を使えば

onkeydown = e => alert(e.key);

キーを押しっぱなしにするとこのイベントが連続して発生するので、1回だけイベントを起こしたい時はonkeyup(キーが離されたとき)を使うとよい。

onkeyup = function(e) { alert(e.key); }

またはアロー関数を使えば

onkeyup = e => alert(e.key);

となる。

input、select、textareaで変更が発生したときのイベントonchange

JavaScript側でwindow.onload時にイベントハンドラーを設定しちゃう方法

HTML側

<input id="here" type="date">

等とやっておいて

JavaScriptには以下のようにして設定する。

window.onload = function () {
	document.getElementById("here").onchange = auieo;
}

//イベントが発生したときの処理は
function aiueo(e) {
	window.alert("イベントが発生:" + e.target.value);
}

HTMLのonclickで関数をやろうとするとイベントのeが渡らないっぽい。

<!--これ駄目↓-->
<input onclick="aiueo()" type="button" value="btn">

イベントハンドラープロパティに入れた関数でないとeが渡らないようだ。



目次