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

JavaScriptのonresetイベントとは？フォームリセット時の処理を実装する方法

onresetイベントとは

JavaScriptのonresetイベントは、フォーム内の「リセット」ボタンがクリックされ、入力内容が初期化されるタイミングで発生するイベントです。このイベントを利用すると、ユーザーがフォームをリセットした瞬間に、確認メッセージの表示やログの記録など、任意の処理を実行できます。

onresetイベントの基本的な使い方

form要素にonreset属性を設定し、イベント発生時に呼び出したい関数名を指定します。以下は、フォームがリセットされるとアラートでメッセージを表示するシンプルな例です。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <script>
         function resetFunct() {
            alert("フォームがリセットされました");
         }
      </script>
      <form onreset="resetFunct()">
         年齢を入力：<input type="number"><br>
         誕生月を入力：<input type="text"><br>
         <input type="reset">
      </form>
   </body>
</html>

このコードでは、「年齢」と「誕生月」の2つの入力欄を持つフォームを作成しています。「リセット」ボタンをクリックするとonresetイベントが発火し、resetFunct()関数が実行されて「フォームがリセットされました」というアラートが表示されます。

addEventListenerを使った書き方

HTML属性を使用せず、JavaScript側からaddEventListener()メソッドでイベントを登録する方法もあります。HTMLとスクリプトを分離できるため、保守性の高いコードになります。

サンプルコード

document.getElementById("myForm").addEventListener("reset", function() {
   alert("フォームがリセットされました");
});

onresetイベントの注意点

  • onresetイベントは、フォームの内容が実際にクリアされる前に発生します。イベントハンドラ内でevent.preventDefault()を呼び出すと、リセット操作自体をキャンセルできます。
  • type="button"の通常ボタンやJavaScriptからのプログラム的な値変更では、このイベントは発生しません。あくまでフォームのリセット操作が対象です。

まとめ

onresetイベントを使えば、フォームがリセットされたタイミングで簡単に処理を追加できます。確認ダイアログの表示や、リセット後の画面状態の調整など、ユーザー体験を向上させるさまざまな場面で活用してみてください。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します