DOMとフォームの値

memo

今作っているもので
ある入力項目に対して
表示　→　表示が消えて入力エリア登場　→　入力エリア消えて表示部分登場＋入力内容反映
という流れをDOM,CSSを使って同じ画面で実現させようとしているけれども
ブラウザの再読み込みを行うと

  • 表示はリセットされる
  • 入力エリアは再読み込み前の値が保存されている

という状況に遭遇。

Internet Explorer6 SP2、Mozilla Firefox1.5 RC1で同じ動きを確認。
Opera7.54, 8.0、Konqueror 3.1.4は表示、入力項目も消える。
わけわからない、、

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScriptテスト</title>
<script language="JavaScript" type="text/javascript">
var artype  = ['','subject','operations'];
var p_link  = 'link_';
var p_disp  = 'disp_';
var p_text  = 'tmp_';
var p_btn   = 'btn_';
var p_hidden= 'i_';

function editTextOn(type){
    if(document.getElementById){
        // リンク除去
        document.getElementById(p_link+artype[type]).style.display='none';
        // 表示除去
        document.getElementById(p_disp+artype[type]).style.display='none';
        // テキストエリア出現
        document.getElementById(p_text+artype[type]).style.display='inline';
        document.getElementById(p_btn+artype[type]).style.display='inline';
        // テキストエリアに差込
        document.getElementById(p_text+artype[type]).value = 
        document.getElementById(p_hidden+artype[type]).value;
    }
}
function editTextOff(type){
    if(document.getElementById){
        // リンク出現
        document.getElementById(p_link+artype[type]).style.display='inline';
        // 表示出現
        document.getElementById(p_disp+artype[type]).style.display='inline';
        // テキストエリア除去
        document.getElementById(p_text+artype[type]).style.display='none';
        document.getElementById(p_btn+artype[type]).style.display='none';
        // テキストエリアの内容を反映
        document.getElementById(p_hidden+artype[type]).value = 
        document.getElementById(p_text+artype[type]).value;
        document.getElementById(p_disp+artype[type]).innerHTML = 
        document.getElementById(p_text+artype[type]).value.replace(/\n/,"<br>");
    }
}
</script>
</head>
<body>
<form name="frm" action="">
<table border="0" cellspacing="1" cellpadding="3" bgcolor="#666666" width="600">
  <tbody>
    <tr>
      <td colspan="4"><font size="-1" color="#ffffff">初期値有</font></td>
      <td align="right"><a href="javascript:editTextOn(1);" id="link_subject"><font size="-1" color="#ffffff">［編集］</font></a></td>
    </tr>
    <tr>
      <td colspan="5" bgcolor="#ffffff"><font size="-1"><div id="disp_subject">初期値有</div></font><input type="hidden" name="i_subject" value="初期値有" id="i_subject">
        <textarea id="tmp_subject" rows="10" cols="70" name="tmp_subject" style="display:none">初期値有</textarea>
        <input type="button" value="編集終了" id="btn_subject" onclick="editTextOff(1);" style="display:none">
        <br>
      </td>
    </tr>
    <tr>
      <td colspan="4"><font size="-1" color="#ffffff">初期値無</font></td>
      <td align="right"><a href="javascript:editTextOn(2);" id="link_operations"><font size="-1" color="#ffffff">［編集］</font></a></td>
    </tr>
    <tr>
      <td colspan="5" bgcolor="#ffffff"><font size="-1"><div id="disp_operations"></div></font><input type="hidden" name="i_operations" value="" id="i_operations">
      <textarea id="tmp_operations" rows="10" cols="70" name="tmp_operations" style="display:none"></textarea>
      <input type="button" value="編集終了" id="btn_operations" onclick="editTextOff(2);" style="display:none">
      <br></td>
    </tr>
    </tbody>
</table>
</form>
</body>
</html>

動作の確認重点でとにかく書いたので中身が汚い(ﾉ∀`)ﾀﾊｰ
ぱっとしない対応方法だけどonloadでフォームの内容を表示内容に差し込む処理を加えればいいかなぁ、、