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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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>

実行結果

サンプルコード解説