JavaScript EnterキーでのSubmitを無効にする方法
エンター（Enter）キーを押したときにフォーム（Form）を送信（Submit）するのをJavaScriptで無効にする方法を紹介します。
エンターキーが押されたかどうかの判定はkeydownイベントで行います。
そのため、まずは制御したいフォームのコントロールにkeydownのイベントを定義します。
// 対象のフォームコントロールを取得
const form = document.getElementById('form1');
// フォームのkeydownイベントを設定
form.addEventListener('keydown', function (event) {
});keydownイベントのパラメータeventに押されたキーの情報があります。
event.keyCodeでキーの情報を取得できます。
エンターキーが押された場合はevent.keyCodeに13がセットされていますので、この値が13かどうかでエンターキーが押されたかどうかを判定します。
// 対象のフォームコントロールを取得
const form = document.getElementById('form1');
// フォームのkeydownイベントを設定
form.addEventListener('keydown', function (event) {
if (event.keyCode === 13) {
// エンターキーが押されたときの動作
}
});keydownのイベント関数のパラメータeventでevent.preventDefault();を実行すると、イベントはキャンセルされます。
エンターキーの場合はイベントを無効にしますが、submitボタン上でエンターキーを押したときや、テキストエリアで入力中にエンターキーを押して改行したい場合などは、エンターキーのイベントは有効にする必要があります。
event.srcElementでイベントの発生元の情報が取得できます。
event.srcElement.typeがsubmit、textarea以外の場合のみイベントをキャンセルするようにします。
最終的には以下のようになります。
// 対象のフォームコントロールを取得
const form = document.getElementById('form1');
// フォームのkeydownイベントを設定
form.addEventListener('keydown', function (event) {
if (event.keyCode === 13) {
// エンターキーが押されたときの動作
if (event.srcElement.type != 'submit' &&
event.srcElement.type != 'textarea') {
// submitボタン、テキストエリア以外の場合はイベントをキャンセル
event.preventDefault();
return false;
}
}
});