onkeydown、onkeypress、onkeyupの動作の違い【JavaScript】

キーボードのイベントの動作の違いをこの記事では紹介します。

onkeydown、onkeypress、onkeyupの3つの動作を実際に見てみましょう。

この記事の目次

入力時イベントの動作の違い【実例】
３つを同時に比べてみる

入力時イベントの動作の違い【実例】

onkeydownイベント

onkeydownのコードサンプルは下記です。

<div class="frame">
<p>onKeydownの表示：<span id="onkeydown"></span></p>
</div>
<input type="text" id="keydownForm" onkeydown="keydownCheck()">

function keydownCheck() {
  var keydownValue = document.getElementById( "keydownForm" ).value;
  document.getElementById( "onkeydown" ).innerHTML = keydownValue;
}

onkeydownのデモは下記です。

「最後に入力した文字"以外"のテキスト」が表示されます。

onkeypressイベント

onkeypressのコードサンプルは下記です。

<div class="frame">
  <p>onKeypressの表示：<span id="onkeypress"></span></p>
</div>
<input type="text" id="keypressForm" onkeypress="keypressCheck()">

function keypressCheck() {
  var keypressValue = document.getElementById( "keypressForm" ).value;
  document.getElementById( "onkeypress" ).innerHTML = keypressValue;
}

onkeypressのデモは下記です。

「最後に入力した文字"以外"のテキスト」が表示されます。

onkeydownと似ていますが、deleteなどの文字キー以外には発生しないのが特徴です。

onkeyupイベント

onkeyupのコードサンプルは下記です。

<div class="frame">
  <p>onKeyupの表示：<span id="onkeyup"></span></p>
</div>
<input type="text" id="keyupForm" onkeyup="keyupCheck()">

function keyupCheck() {
  var keyupValue = document.getElementById( "keyupForm" ).value;
  document.getElementById( "onkeyup" ).innerHTML = keyupValue;
}

onkeyupのデモは下記です。

「入力したテキスト」が表示されます。

３つを同時に比べてみる

上の説明だけだとちょっと分からないですよね。

onkeydownとonkeypressの違いは分かりづらいです。

下記に３つを同時に比べられるデモを作成したので、半角英数字を入力したり、かなを入力したりして、動作の違いを確認してみましょう。

<form name="check">
  <p>入力文字：<input type="text" size="40" onkeydown="keyD()" onkeypress="keyP()" onkeyup="keyU()">
</p>
  <p>keyDown：<span id="down"></span></p>
  <p>keyPress：<span id="press"></span></p>
  <p>keyUp　：<span id="up"></span></p>
</form>

var keydown = 0;
function keyD() {
	if(keydown%2 == 0) {
      document.getElementById("down").innerHTML = "□" ;
 	} else {
      document.getElementById("down").innerHTML = "■" ;
 	} 
	keydown++;
}

var keypress = 0;
function keyP() {
	if(keypress%2 == 0) {
      document.getElementById("press").innerHTML = "□" ;
 	} else {
      document.getElementById("press").innerHTML = "■" ;
 	} 
	keypress++;
}

var keyup = 0;
function keyU() {
	if(keyup%2 == 0) {
      document.getElementById("up").innerHTML = "□" ;
 	} else {
      document.getElementById("up").innerHTML = "■" ;
 	} 
	keyup++;
}

以上、onkeydown、onkeypress、onkeyupの動作の違いでした。

問い合わせフォームなどで入力値の確認などに利用する際に便利なのはonkeyupではないかと思います。

≫フォームの入力テキストをリアルタイムに取得するonkeyup【JavaScript】

changeもありますが、changeはフォームから離れた際に発火するものなので、その点に違いがあります。