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

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

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

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

動画の詳細はこちら

Contents

1 resetイベントとは
2 resetイベントの使い方
3 サンプルコード

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>

実行結果

サンプルコード解説