JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】Enterキー押下時にのデフォルト動作を無効化する方法

<input type="time"> にフォーカスがある状態で Enterキー を押すと、ブラウザによってはフォーム送信やフォーカス移動などのデフォルト動作が発生することがあります。これを防ぐには、keydown イベントを監視し、preventDefault() を呼び出してデフォルトの挙動をキャンセルします。

実装手順

以下の手順で実装できます。

  1. 対象のinput要素に対して addEventListener("keydown", ...) でイベントリスナーを登録する。
  2. イベントハンドラ内で event.key === "Enter" を判定する。
  3. 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>
</head>
<body>
<input type="time" id="disableDefaultTime">
<script>
    const pressEnter = (event) => {
        if (event.key === "Enter") {
            event.preventDefault();
        }
    };
    document.getElementById("disableDefaultTime").addEventListener("keydown", pressEnter);
</script>
</body>
</html>

動作確認方法

上記のコードを index.html などの名前で保存し、VSCodeの拡張機能「Live Server」を使って開くと簡単に確認できます。ファイルを右クリックして「Open with Live Server」を選択してください。

実行結果

このコードを実行すると、時刻入力フィールドにフォーカスがある状態で Enterキーを押しても何も起こらなくなります。デフォルトの挙動（フォーム送信など）は完全に抑制されます。

一方で、時刻の選択自体は通常どおり行えます。マウス操作や矢印キーを使えば、以下のように問題なく時刻を入力できます。

  • keydownイベント： キーが押された瞬間に発生するイベントです。ここで判定を行うことで、デフォルト処理が実行される前に介入できます。
  • preventDefault()： ブラウザのデフォルト動作（フォーム送信、ページ遷移など）をキャンセルするメソッドです。イベントオブジェクトに対して呼び出します。

このように、keydown イベントと preventDefault() を組み合わせるだけで、<input type="time"> 上でのEnterキーのデフォルト動作を簡単に無効化できます。フォーム内の時刻入力欄で誤送信を防ぎたい場合などにぜひ活用してください。

  1. JavaScriptで指定した時刻になったら関数を自動実行する方法

    JavaScriptで「特定の日時に達したら関数を実行したい」というケースでは、目標時刻までの時間差（ミリ秒）を計算し、それを setTimeout() に渡すのが基本のアプローチです。ここでは、その実装手順をサンプルコードとともにわかりやすく解説します。 実装の流れ トリガーしたい日時を Date オブジェクトで作成し、getTime() でミリ秒値に変換します。 現在時刻も同様に getTime() でミリ秒として取得します。 「目標時刻 − 現在時刻」の差分を計算します。これが「あと何ミリ秒で目標時刻になるか」を表します。 差分を setTimeout() の第2引数に渡し、第1引数に

  2. Seleniumでテキスト入力ボックスのEnterキー操作をシミュレートする方法

    Selenium WebDriverを使用すると、HTMLのテキスト入力ボックスに対するEnterキーの押下を簡単にシミュレートできます。その際に活用するのが sendKeys メソッドで、引数として Keys.ENTER を渡します。また、同じ動作は Keys.RETURN を引数に渡すことでも実現できます。Keys クラスを利用するためには、あらかじめコード内で org.openqa.selenium.Keys パッケージをインポートしておく必要があります。ここでは、入力ボックスにテキストを入力した後、ENTER／RETURNキーを送信する手順を具体的に見ていきましょう。実装例Keys.E