button元素在過去一直沒有被重視，其實它比<input type="button">的語義強許多，制定性也好許多。不過IE的button元素存在一個可怕的bug。它總是把其innerHTML神經錯亂地當成其value值，因此，如果用它來提交表單時，可能產生一些負作用，會把正確的索引值對覆蓋了。
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=7"><br /> <title>button element bug by 司徒正美</title><br /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function(){<br /> var el = document.getElementById("bb");<br /> alert(el.getAttribute("value"))<br /> alert("下面是jQuery1.3.2取得的值");<br /> alert($("#bb").attr("value"))<br /> alert($("#bb").val())<br /> }<br /> </script><br /> </head><br /> <body><br /><button value="正確的值" id="bb"><br /> <span style="color:red;">錯誤的值</span><br /></button></p><p> </body><br /></html><br />
運行代碼
這惡性bug即使是jQuery1.3.2也沒有修正它，因此不要迷信jQuery。不過，這bug也不是那麼難修正的。如果光是想獲得正確的value值，我們可以簡單地使用如下代碼：
var el = document.getElementById("bb");el.attributes["value"].nodeValue
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=7"><br /> <title>button element bug by 司徒正美</title><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function(){<br /> var el = document.getElementById("bb");<br /> alert(el.attributes["value"].nodeValue)<br /> }<br /> </script><br /> </head><br /> <body><br /><button value="正確的值" id="bb"><br /> <span style="color:red;">錯誤的值</span><br /></button></p><p> </body><br /></html><br />
運行代碼
如果是提交表單時，就有點麻煩了。為了對比效果，我把錯誤的提交也做成例子了。留意以下運行框，點擊按鈕後如果地址欄的location search是nasami=correct_submit，說明提交成功，如果是nasami=error_submit，說明提交了錯誤的值了。
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=7"><br /> <title>button element bug by 司徒正美</title><br /> <script type="text/javascript" charset="utf-8"><br /> </script><br /> </head><br /> <body><br /> <form action="http://www.cnblogs.com/rubylouvre/" method="get"><br /> <button value="correct_submit" name="nasami" type="submit"><br /> error_submit<br /> </button><br /> </form><br /> </body><br /></html><br />
運行代碼
加上修正指令碼之後……
</p><p><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=7"><br /> <title>button element bug by 司徒正美</title><br /> <script type="text/javascript" charset="utf-8"><br /> //此bug存在於IE5,IE5.5,IE6,IE7,修正於IE8 beta1，早期版本可用以下指令碼修正！<br /> if(!+"\v1"){<br /> window.attachEvent("onload", function(){<br /> var buttons = document.getElementsByTagName('button');<br /> for (var i=0; i<buttons.length; i++) {<br /> if(buttons[i].onclick) continue;<br /> buttons[i].onclick = function () {<br /> for(var j=0,n=this.form.elements.length; j<n; j++)<br /> if( this.form.elements[j].tagName == 'BUTTON' )<br /> this.form.elements[j].disabled = true;<br /> this.disabled=false;<br /> this.value = this.attributes["value"].nodeValue ;<br /> }<br /> }<br /> });<br /> }<br /> </script><br /> </head><br /> <body><br /> <form action="http://www.cnblogs.com/rubylouvre/" method="get"><br /> <button value="correct_submit" name="nasami" type="submit"><br /> error_submit<br /> </button><br /> </form><br /> </body><br /></html><br />
運行代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
