buttonタグの挙動がブラウザで異なる - 適当な思いつきで書くブログ

buttonタグのvalueの値を使ってjs書いていたんだけど、IEとFireFoxでvalueの取り扱いが異なることに気がついたのでメモ。
ついでにinnerHTMLの取り扱いも調べた。

準備

↓の場合を考えるよ。

<button value="foo">bar</button>

結果

IEと非IEで取り扱いが異なりました。

button	IE6, IE7	FireFox, Opera, Safari
value	bar	foo
innerHTML	bar	bar

デモはこちら

自分のまとめ

どっちが正しいかは別として、valueをきちんと設定しておかないとIEで微妙ですね。

ソースは下記
HTML(hoge.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hoge</title>
</head>
<body>

<button id="btn" value="foo">bar</button>

<p id="result-value"></p>
<p id="result-innerHTML"></p>

<script type="text/javascript">
//<![CDATA[
  (function() {
    document.getElementById('btn').onclick = function() {
      document.getElementById('result-value').innerHTML = '"value" is "' + this.value + '".';
      document.getElementById('result-innerHTML').innerHTML = '"innerHTML" is "' + this.innerHTML + '".';
    };
  })();
//]]>
</script>

</body>
</html>