| 解 説 |
グラフィカルなリセットボタンにするにはリセットボタンを配置しスタイルシートを使って見えない状態にしておきます。リセットの画像が押されたら見えない状態になっているリセットボタンをclick()メソッドを使って強制的にクリックしたことにします。この方法を使えばonResetイベントも発生するため本当に消去するかどうかの確認なども容易に行えます。全く別の方法としては、最初にフォームのすべての状態を変数に格納しておきボタンが押されたら元に戻すというものもあります。
|
| コード |
<![CDATA[
<html>
<head>
<title>グラフィカルなリセットボタンにする</title>
<script language="JavaScript">
<!--
function check(){
return confirm("OK?");
}
function res()
{
document.myFORM.myRES.click();
}
// --></script>
</head>
<body>
<form name="myFORM" onReset="return check()">
<input type="text" value="sample">
<a href="javascript:res()"><img src="reset.gif"></a>
<input type="reset" name="myRES" style="visibility:hidden">
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
グラフィカルなリセットボタンにする