<input type="button" value="btn" id="btn" name="btn">
之外，你還可以用
<button id="btn" name="btn"></button>
來達到目的。
但使用<button>這語法，最近卻讓我吃足了苦頭，發現在 IE6 與 IE8 竟然會有不同的執行結果。經過觀察後發現，在 IE6使用<button>，並不會觸發 PostBack，但在 IE8 卻會。
原來，<button> 其實有一個屬性：type，可以允許你挑選 submit、button、reset。選擇 submit 時，就會觸發 Asp.Net 的 PostBack，而 button 則是視為一般的按鈕事件，並不會觸發 PostBack。 當你不指定時，就會以預設行為模式來處理。而有趣的地方，就在於這預設行為模式怎麼判定。在 IE6，預設行為模式是 button，也就是不會觸發 PostBack，但是在 IE8，則改成 submit，變成會觸發 PostBack了，另外，非IE 的瀏覽器，則預設行為一律都是 submit。
以下是測試程式：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Button.aspx.cs" Inherits="Button" %>
<!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 runat="server">
<title>未命名頁面</title>
<style>
* { font-size:14px }
p {width:400px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" name="btn" value="btnTest">Default</button><br />
<button id="btnSubmit" name="btnSubmit" value="btnSubmit" type="submit">Force Submit</button><br />
<button id="btnButton" name="btnButton" value="btnButton" type="button">Force Button</button><br />
</div>
<script>
document.write('<p><font color="blue">Browser Name:</font><br/>'+navigator.appName+navigator.appVersion+'</p>');
document.write('<font color="blue">Default:</font> ' + document.getElementById('btn').type + '<br />');
document.write('<font color="blue">Force Submit:</font> ' + document.getElementById('btnSubmit').type + '<br />');
document.write('<font color="blue">Force Button:</font> ' + document.getElementById('btnButton').type + '<br />');
</script>
</form>
</body>
</html>
執行後於各瀏覽器的結果：
所以，為了能在不同瀏覽器上達到預期的效果，請別忘了在使用 <button> 時，定義好他的 type 屬性。
參考：
01：IE 8 Button Element Bug
02：HF9015: IE6 IE7 IE8(Q) 中 BUTTON 元素的 type 属性默认值不是 submit
沒有留言:
張貼留言