JavaScript

【JavaScript】resetイベントとは?フォームリセット時にイベントを実行する

こちらの記事では、JavaScriptのreset(リセット)イベントについてサンプルコードを用いて分かりやすく解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

resetイベントとは

resetイベントとは、イベントを設定したフォームがリセットされた時に実行されるイベントです。

ユーザーが入力した文字などをリセットボタンなどで取り消す際に、本当に取り消しても大丈夫かポップアップを出力させてユーザーに再確認させる時などに使えます。

resetイベントの使い方

resetイベントの使い方は以下のとおりです。
▼onreset属性
<form onreset="resetEvent()">テキスト</form>

<script>
function resetEvent(){
  // 処理を記述
};
</script>

サンプルコード

こちらで紹介するサンプルコードは、任意の文字を入力し「クリア」と書かれたボタンをクリックすると、アラートが表示され「OK」を選択すると入力された文字が削除され、「キャンセル」をクリックすると、入力した文字は残ります。
<form id="js-form" onreset="return resetEvent()"> // ①
  <input type="text" placeholder="文字を入力してください">
  <input type="reset" value="クリア"></input>
</form>

<script>
function resetEvent(){ // ②
  confirm("入力した文字を削除しますか?"); // ③
}
</script>
実行結果

サンプルコード解説

  1. onreset属性で、リセットイベントが実行された時にresetEvent関数を呼び出す
  2. ①で指定した、resetEvent関数を定義する
  3. confirmメソッドを使って、入力した文字を本当に削除してよいかユーザーに再確認する

onreset属性で指定している関数の前とconfirmメソッドの前にreturnの記述をしないと、ダイアログでキャンセルを選択しても入力した文字が削除されてしまいます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村