はじめに
テキストボックスでEnterキーを押したときに任意の処理を発火させるにはどうすればいいのか調べたときの備忘録です。
やりかた
addEventListenerでkeypressイベントを登録する。-
addEventListenerでkeydownイベントを登録する。 EventオブジェクトからkeyCode === 13で条件分岐をする。-
Eventオブジェクトからkey === 'Enter'で条件分岐をする。
注意
keypressイベント及びkeyCodeプロパティは現在非推奨となっています。
keydownイベント及びkeyやcodeなど他のプロパティに変更することをお勧めします。
(@jsdtue55 さんよりコメントにてご教授いただきました。ありがとうございます。)
サンプル
テキストボックスでEnterキーを押したときにコンソールに文字を表示します。
sample.html
<html lang="ja">
<head>
<title>さんぷる</title>
</head>
<body>
<h1>さんぷる</h1>
<!-- ↓のテキストボックスでEnterキーを押したらイベントが発火 -->
<input type="text" id="textbox">
</body>
<script src="sample.js"></script>
</html>
sample.js
document.addEventListener('DOMContentLoaded',pageLoad)
/* ページをロードした時にテキストボックスにリスナを登録 */
function pageLoad(){
var textbox = document.getElementById('textbox');
textbox.addEventListener('keydown', enterKeyPress);
}
/* テキストボックスでEnterキーが押されたらコンソールに文字を表示 */
function enterKeyPress(event){
if(event.key === 'Enter'){
console.log('Press your Enter key.')
}
}
おしまい。