onresetイベント

onresetイベント(リセットイベント)とは、フォームのリセットボタンをクリックした時のイベント。

構文

HTML

<form onreset="イベントハンドラ">

JavaScript

formObject.onreset = function(){ イベントハンドラ };

サンプル1


リセットした回数:0

サンプル1について

HTMLドキュメント上でイベントハンドラを登録するサンプル。

サンプル1の動作について

リセットボタンをクリックする度に、

  • 「リセットした回数:」の右横の数値に1を加算する。
  • テキスト入力欄の内容を初期値(デフォルト値)に戻す。このサンプルの場合、空白に戻す。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
var $sample1count = 0;
function sample1reset() {
 document.getElementById( "sample1output" ).innerHTML = ++$sample1count;
}
</script>

HTML

<div>
 <form onreset="sample1reset();">
  <input type="text" id="sample1input">
  <input type="reset" value="リセット">
 </form>
 <br />
 リセットした回数:<span id="sample1output">0</span>
</div>

サンプル2


リセットした回数:0

サンプル2について

JavaScript上で動的にイベントハンドラを登録するサンプル。

サンプル2の動作について

リセットボタンをクリックする度に、

  • 「リセットした回数:」の右横の数値に1を加算する。
  • テキスト入力欄の内容を初期値(デフォルト値)に戻す。このサンプルの場合、空白に戻す。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample" ).onreset = function(){
  sample2reset();
 };
}
var $sample2count = 0;
function sample2reset() {
 document.getElementById( "sample2output" ).innerHTML = ++$sample2count;
}
</script>

HTML

<div>
 <form id="sample">
  <input type="text" id="sample2input">
  <input type="reset" value="リセット">
 </form>
 <br />
 リセットした回数:<span id="sample2output">0</span>
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, フォームイベント, リファレンス パーマリンク