reset

resetの基本的な使い方

イベントリスナーのresetは、リセットボタンをクリックした時に処理を実行できます。

以下は、利用例です。

<form id="test-reset">
<input type="text">
<button type="reset">リセット</button>
</form>

<script>
const x = document.querySelector("#test-reset");
x.addEventListener("reset", function(){alert("テストです");});
</script>

赤字部分でresetイベントを登録しています。無名関数で直接alertを記述していますが、func1などと関数を呼び出すこともできます。

実行例は、以下のとおりです。

リセットボタンをクリックするとアラートが表示され、テキスト入力欄はデフォルトの状態(空白)に戻ります。デフォルトの状態に戻るのは、リセットボタンが元から持っている機能です。

セレクトボックスでの使い方

セレクトボックスでの使い方です。

<form id="test-reset">
<select>
<option value=10>10</option>
<option value=20>20</option>
</select>
<button type="reset">リセット</button>
</form>

<script>
const x = document.querySelector("#test-reset");
x.addEventListener("reset", function(){alert("テストです");});
</script>

実行例は、以下のとおりです。

20を選択した後にリセットボタンをクリックすると、アラートが表示された後に10が選択された状態に戻ります。ラジオボタンやチェックボックスなども同じで、リセットボタンをクリックすると、処理が行われた後にデフォルトの選択に戻ります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。