input[type=hidden]の要素はinput[type=reset]でリセットされない(但しIEは除く)
input[type=reset]のボタンはクリックすると、そのform内の要素にリセットがかかります(value属性で設定されている値になる)が、input[type=hidden]な要素はリセットされずに値が保持されたままになると。
検証したソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>input type=hidden test</title> <style type="text/css"> table { border-collapse: collapse; } th, td { border: solid 1px #808080; } th { background-color: #dcdcdc; } .vol{ width: 60px; text-align: right; } </style> <script type="text/javascript"> function add(elm) { if (elm.value == '') return; var re = new RegExp('\\D'); if (re.test(elm.value)) elm.value = 0; var a = Number(document.getElementById('apple').value); var o = Number(document.getElementById('orange').value); var b = Number(document.getElementById('banana').value); document.getElementById('totalvol').value = a + o + b; } function showTotal() { alert(document.getElementById('totalvol').value); } </script> </head> <body> <form id="hoge" action="#"> <p><input type="reset" value="reset"><input type="button" value="total" onclick="showTotal();"></p> <table> <tr> <th>品名 <th>単価 <th>個数 </tr> <tr> <td>りんご <td>100 <td><input type="text" maxlength="2" class="vol" id="apple" value="0" onblur="add(this);"> </tr> <tr> <td>みかん <td>50 <td><input type="text" maxlength="2" class="vol" id="orange" value="0" onblur="add(this);"> </tr> <tr> <td>ばなな <td>80 <td><input type="text" maxlength="2" class="vol" id="banana" value="0" onblur="add(this);"> </tr> </table> <p><input type="hidden" value="0" id="totalvol"></p> </form> </body> </html>
Firefox、Safari、Operaではリセットされずに値は残ったままなんですが、IEだけはリセットされます。Chromeは会社のPCが2k機でインストール出来ないんで未確認。
どっちの仕様が正しいのかはわかんないんですが、いつも通り!?IEが独自実装で他のブラウザが正しい実装なんだろうなぁ。