resetの使い方
resetは、リセットボタン(ボタンのタイプがreset)をクリックした時に処理を実行出来ます。
以下は、例です。
【reset利用例】
<form id="test-reset1">
<input type="text">
<button type="reset">リセット</button>
</form>
<script>
var x1 = document.getElementById("test-reset1");
x1.addEventListener("reset", function(){alert("テストです");}, false);
</script>
赤字部分でresetイベントを登録しています。無名関数で直接alertを記述していますが、func1等と関数を呼び出す事も出来ます。
実行例は、以下の通りです。
リセットボタンをクリックするとアラートが表示され、テキスト入力欄はデフォルトの状態(空白)に戻ります。デフォルトの状態に戻るのは、リセットボタンが元から持っている機能です。
セレクトボックスでの例
セレクトボックスでの例です。
【セレクトボックスでの例】
<form id="test-reset2">
<select>
<option value=10>10</option>
<option value=20>20</option>
</select>
<button type="reset">リセット</button>
</form>
<script>
var x2 = document.getElementById("test-reset2");
x2.addEventListener("reset", function(){alert("テストです");}, false);
</script>
これは、以下のようになります。
20を選択した後にリセットボタンをクリックすると、アラートが表示された後に10が選択された状態に戻ります。ラジオボタンやチェックボックス等も同じで、リセットボタンをクリックすると、処理が行われた後にデフォルトの選択に戻ります。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
サポートするタグの一例は、以下の通りです。
<form>