HTML/JavaScript/jQuery：フォームをEnterキーで送信する3つの方法
2024-04-02
jQueryでEnterキーでフォームを送信する方法
HTMLフォームでEnterキーを押した時にフォームを送信するには、いくつかの方法があります。jQueryを使用すると、簡単に実装することができます。
方法
- jQueryライブラリの読み込み
HTMLファイルのhead要素内に、jQueryライブラリのCDNリンクを追加します。
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
- フォーム要素の取得
jQueryの$(selector)を使って、送信したいフォーム要素を取得します。
<form id="my-form">
<input type="text" name="name">
<input type="submit" value="送信">
</form>
const form = $("#my-form");
- Enterキー押下時のイベント処理
フォーム要素に対してon("keypress")イベントを設定し、Enterキー押下時に処理を実行します。
form.on("keypress", function(event) {
// Enterキー押下時の処理
if (event.which === 13) {
// フォーム送信
form.submit();
}
});
上記コードでは、event.whichプロパティでキーコードを取得し、Enterキーの場合はform.submit()メソッドを実行してフォームを送信します。
補足
- 上記コードは、フォーム内に1つの送信ボタンが存在する場合にのみ有効です。
- 複数の送信ボタンが存在する場合、どのボタンを押下した時に送信するかを制御したい場合は、
event.targetプロパティを使って押下されたボタンを取得する必要があります。 - Enterキー押下時に送信する処理をキャンセルしたい場合は、
event.preventDefault()メソッドを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enterキーで送信するフォーム</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="my-form">
<input type="text" name="name" placeholder="名前を入力">
<input type="submit" value="送信">
</form>
<script>
$(function() {
const form = $("#my-form");
form.on("keypress", function(event) {
if (event.which === 13) {
event.preventDefault();
form.submit();
}
});
});
</script>
</body>
</html>
- 上記コードは、シンプルなHTMLフォームとjQueryを使用して、Enterキーで送信する機能を実装しています。
- フォームには、名前を入力するためのテキストボックスと、送信ボタンがあります。
- jQueryを使用して、フォーム要素を取得し、
keypressイベントを設定しています。 - Enterキーが押下された時に、
event.preventDefault()メソッドを使用してデフォルトの動作をキャンセルし、form.submit()メソッドを実行してフォームを送信しています。
動作確認
上記コードをHTMLファイルとして保存し、ブラウザで開きます。
- テキストボックスに名前を入力します。
- Enterキーを押下します。
フォームが送信され、入力した名前が表示されます。
改良
- フォーム送信前にバリデーション処理を追加する
- 送信ボタンを押下した時にも送信できるようにする
- アニメーションなどを使用して送信時のUIを改善する
Enterキーでフォームを送信する他の方法
HTMLのonsubmit属性
HTMLのform要素にonsubmit属性を設定することで、フォーム送信時の処理を指定できます。
<form onsubmit="return submitForm()">
<input type="text" name="name">
<input type="submit" value="送信">
</form>
function submitForm() {
// フォーム送信前の処理
// ...
// フォーム送信
return true;
}
上記コードでは、submitForm()関数を呼び出し、フォーム送信前の処理を実行しています。
return true;を返すことで、フォーム送信を許可します。
JavaScriptのaddEventListener()を使用して、フォーム要素にkeypressイベントを設定できます。
<form id="my-form">
<input type="text" name="name">
<input type="submit" value="送信">
</form>
const form = document.getElementById("my-form");
form.addEventListener("keypress", function(event) {
if (event.which === 13) {
// フォーム送信
form.submit();
}
});
<form id="my-form">
<input type="text" name="name">
<input type="submit" value="送信">
</form>
const form = document.getElementById("my-form");
form.onkeydown = function(event) {
if (event.keyCode === 13) {
// フォーム送信
form.submit();
}
};
- jQueryを使用している場合は、jQueryの
on("keypress")イベントを使用するのが最も簡単です。 - jQueryを使用していない場合は、HTMLの
onsubmit属性またはJavaScriptのaddEventListener()/onkeydownを使用できます。
javascript jquery html
