こちらの記事では、JavaScriptのreset(リセット)イベントについてサンプルコードを用いて分かりやすく解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
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>
実行結果
サンプルコード解説
- onreset属性で、リセットイベントが実行された時にresetEvent関数を呼び出す
- ①で指定した、resetEvent関数を定義する
- confirmメソッドを使って、入力した文字を本当に削除してよいかユーザーに再確認する
onreset属性で指定している関数の前とconfirmメソッドの前にreturnの記述をしないと、ダイアログでキャンセルを選択しても入力した文字が削除されてしまいます。