JavaScriptのonresetとは？フォームリセット時に処理を実行する方法を解説
onreset は、フォームがリセットされたときに発生するイベントです。
リセットボタンが押されたとき、または form.reset() が実行されたときに処理を実行できます。
また、戻り値が false の場合、リセット処理を中止できます。
onresetイベントとは？
フォームの内容を初期状態に戻す直前に発生するイベントです。
入力内容を消す前に確認ダイアログを表示したり、リセットを防止したい場合に利用します。
使用例：リセット時に確認ダイアログを表示
<form onreset=”return confirm(‘本当にリセットしますか？’)”>
→ OK を押した場合のみリセットされ、キャンセルなら中止されます。
リセット処理を中止する方法
リセットを止めたい場合は、return false を返す関数を使います。
function stopReset() {
alert(‘リセットは中止されました’);
return false;
}
alert(‘リセットは中止されました’);
return false;
}
この関数を onreset に設定すると、リセットされません。
<form onreset=”return stopReset()”>
実際のフォーム例（確認付きリセット）
<script>
function checkReset() {
return confirm(‘入力内容をすべて消去します。よろしいですか？’);
}
</script>
function checkReset() {
return confirm(‘入力内容をすべて消去します。よろしいですか？’);
}
</script>
<form name=”myForm” onreset=”return checkReset()”>
名前：<input type=”text” name=”user”><br>
メール：<input type=”text” name=”mail”><br>
<input type=”reset” value=”リセット”>
<input type=”submit” value=”送信”>
</form>
→ リセットボタンを押すと確認ダイアログが表示されます。
まとめ
onresetはフォームリセット時に発生するイベント- 戻り値が
falseの場合、リセットを中止できる - 確認ダイアログを表示して誤操作を防止できる
- フォーム操作の安全性を高めるために便利
