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

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

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

• 誰でも分かるように嚙み砕いて説明してくれる
• アニメーションの知識が深く学べる
• 1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2025/07/13 22:58時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

resetイベントとは

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

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

resetイベントの使い方

resetイベントの使い方は以下のとおりです。

▼onreset属性
<form onreset="resetEvent()">テキスト</form>

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

あわせて読みたい

【JavaScript】イベントリスナーとイベントハンドラの違いについて 本記事では、JavaScriptのイベント設定をするイベントリスナーとイベントハンドラの違いについてサンプルコードを用いて分かりやすく解説しています。 イベントリスナー…

サンプルコード

こちらで紹介するサンプルコードは、任意の文字を入力し「クリア」と書かれたボタンをクリックすると、アラートが表示され「OK」を選択すると入力された文字が削除され、「キャンセル」をクリックすると、入力した文字は残ります。

<form id="js-form" onreset="return resetEvent()"> // ①
  <input type="text" placeholder="文字を入力してください">
  <input type="reset" value="クリア"></input>
</form>

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

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