HTML5 〜 output要素のデフォルト値の変更にtextContentを使用すると、resetが期待通りの動作をしない
今回の記事の内容は、「一度でもtextContentを使用したoutput要素の表示変更を実行した場合、resetボタン実行時にouput要素の値はデフォルト値には戻らない。textContentにセットされた値に戻ってしまう。」事実についてだ。
HTML5のouput要素については、前回のエントリーで説明した。
そのoutput要素に値を反映させる方法は次の２つがある。
- value属性の値を変更する
- textContentの値を変更する
ouput要素に値を反映させるソースコードを下に記す。
<form> <output name="out">output要素のデフォルト値（これをvalueとtextContent属性を使用して変更する）</output><br> <!-- value属性の値を変更する方法--> <input type="button" onclick="form.out.value = '変更された値1'" value="valueを使用して変更１"> <!-- textContent属性の値を変更する方法--> <input type="button" onclick="form.out.textContent = 'textContentを使用して変更された。'" value="textContentを使用して変更"> </form>
これで確かに、ouput要素の表示を変更することができる。
しかし、一度でもtextContentを使用したoutput要素の表示変更を実行した場合、resetボタン実行時にouput要素の値はデフォルト値には戻らない。textContentにセットされた値に戻ってしまう。
下記で実際に検証したのだが、（仕様は確認していないが）間違いなくそのように動作する。なお、ブラウザはChrome11とopera11で試した。
