JavaScript | フォーム内でのEnterキーの入力を取得する方法

2020-06-052022-02-04JavaScript フォーム,JavaScript

PCメインのコンテンツでテキストフォームの値を取得して処理をしたい場合に、ユーザービリティの観点からEnter（リターン）キーを使った発火イベントは有効な場合が良くあります。

Enter（リターン）キーにイベント処理を加えるには、いくつかの方法があると思いますが、今回はaddEventListener()を使った簡単に実装できる方法を紹介します。

Enter（リターン）キーの発火イベント動作サンプル

動作サンプルでは、テキストフォーム内でリターンキーが押された場合にイベント発火、テキストフォーム内の値を取得して出力しています。

See the Pen JavaScript Fire event of Enter key by yochans (@yochans) on CodePen.

サンプルコードと説明

動作サンプルの実装コードは以下の様になっています。

let text_form = document.getElementById('text_form');
let output = document.getElementById('output');

text_form.addEventListener('keypress', test_ivent);

function test_ivent(e) {
  	if (e.keyCode === 13) {
		output.innerHTML = text_form.value;
	}  
		return false;
}

テキストフォームと、出力する要素を指定。

let text_form = document.getElementById('text_form');
let output = document.getElementById('output');

addEventListener()でキーの入力を発火イベントにしています。
実行する関数名はtest_ivent()とします。

text_form.addEventListener('keypress', test_ivent);

イベントパラメータ（サンプルでは変数eに格納）を取得して、押されたキーがEnter（リターン）キーかどうか判別します。

Enter（リターン）キーのKeyCodeは13。

押されたキーがEnter（リターン）キーであった場合、ここでは出力の処理を実行して終わります。

function test_ivent(e) {
  	if (e.keyCode === 13) {
		output.innerHTML = text_form.value;
	} 
		return false;
}

「return false」としておく事でフォーム送信など本来のイベント処理を実行しない様にしています。

同時にシフトキーやCtrlキーが押されていた場合の振り分け処理

同時にシフトキーやCtrlキーが押されていた場合に別の処理を実装したい場合は、簡単なもので良ければ以下の様に振り分け処理を書いていくと実装可能です。

let text_form = document.getElementById('text_form');
let output = document.getElementById('output');

text_form.addEventListener('keypress', test_ivent);

function test_ivent(e) {
  	if(e.keyCode === 13 && e.shiftKey === true){
		//Enter + Shift
	}
  	else if(e.keyCode === 13 && e.ctrlKey=== true){
		//Enter + CtrlKey
	}
  	else if(e.keyCode === 13 && e.altKey=== true){
		//Enter + Alt
	}
	return false;
}