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