2009-01-14 54 views
11

在表單中輸入的預期行爲突出第一提交按鈕停止IE瀏覽器似乎在HTML 4.01 Specification要取消定義,而HTML 5規範says應該在表格中第一個提交按鈕。從形式

Internet Explorer(IE)突出顯示錶單中的第一個按鈕,當表單通過添加專有邊框或其他東西來聚焦時。其他瀏覽器不會添加這樣的視覺線索。

我想使用另一個按鈕作爲默認和樣式此按鈕,所以所有的瀏覽器將提供一個視覺線索,它是默認按鈕。 (我們使用ASP.NET,每頁使用一種形式,所以很難設計頁面,以便默認按鈕始終是第一位。)

儘管我可以在大多數瀏覽器中輕鬆地使用javascript和css實現此目的,我無法使IE停止突出顯示第一個按鈕。

有什麼辦法可以讓IE不突出顯示第一個提交按鈕或突出顯示不同的按鈕嗎?還是有其他解決方案,我錯過了?

回答

15

在你的asp.net按鈕控件上,設置useSubmitBehavior="false"。這呈現爲一個按鈕,而不是一個提交的HTML。

-1

如何爲此按鈕定義特定的CSS樣式(或類)?

<input type="button" value="basic button" .../> 
<input type="button" style="border: solid 2px red;" value="default button" .../> 
+0

是的,但沒有回答這個問題。我試圖改善這個問題,所以它更清楚我在找什麼。 – Alf 2009-01-14 12:30:16

0

如果您使用的是.NET 2 this可以幫助你

...與輸入 焦點時使用DefaultFocus屬性來 訪問控制窗體上 顯示作爲對照HtmlForm控件是加載的 。 可以選擇的控件 會顯示一個視覺提示 ,表明它們的焦點爲。 例如,帶有 焦點的文本框控件將與位於其內部的插入點 一起顯示。 ...

+0

不幸的是,它並沒有幫助我。謝謝你嘗試。 :) – Alf 2009-01-14 12:41:28

1

解決此問題的一種方法是在窗體頂部創建一個虛擬按鈕並將其移出視線。然後在javascript中處理輸入密鑰並使用css設置新的默認按鈕。

雖然感覺髒。任何更好的想法?

2

ASP.Net 2.0還引入了DefaultButton的概念。

這是可在ATLEAST形式和麪板元素:

<form id="form1" runat="server" defaultbutton="Button2"> 
<div> 
    <asp:TextBox id="TextBox1" runat="server"></asp:TextBox> 
    <br /> 
    <asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" /> 
    <br /> 
    <br /> 
    <asp:panel id="something" defaultbutton="button3" runat="server"> 
     <asp:TextBox id="TextBox2" runat="server"></asp:TextBox> 
     <br /> 
     <asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" /> 
     <br /> 
     <asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" /> 

    </asp:panel> 
    <br /> 
    <br /> 

</div> 
</form> 

所以,當你加載頁面,或在TextBox1中輸入文本,按Enter鍵將提交Button2的。當您在TextBox2中輸入文本時,按Enter鍵將提交Button3 - 就像您在Panel中一樣。

這是由ASP.Net創建的onkeypress方法驅動的。

當頁面加載時,IE和Firefox都會突出顯示Button2(如您所願)。

如果您知道哪個按鈕將被聲明爲defaultbutton,那麼您可以使用通常用於爲所有瀏覽器設置樣式的CSS。

相當惱人的是,當你關注任一文本框時,IE會(不正確)突出顯示Button1。

這是因爲IE瀏覽器的默認行爲是由一些JavaScript通過ASP.Net發出覆蓋:

<script type="text/javascript"> 
//<![CDATA[ 
WebForm_AutoFocus('Button2');//]]> 
</script> 

但是,那麼IE將忽略,一旦其他元素具有焦點,並返回到突出錯按鈕(除非用戶在本例中明確地點擊它,否則不會被使用)。

除了用圖像按鈕替換它們之外,我不確定我還能提出什麼建議。

+0

afairs的當前狀態的一個很好的描述。不幸的是,問題仍然沒有解決,就像你自己指出的那樣。 – Alf 2009-01-14 15:55:34

+0

很好的解釋,謝謝。使用TK的答案適合我。 – Brian 2012-08-31 09:28:21

1

使用這兩種CSS樣式

a:active, a:focus,input, input:active, input:focus{  outline: 0;  outline-style:none;  outline-width:0; } 
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{  border: none; } 

OR

:focus {outline:none;} ::-moz-focus-inner {border:0;} 

一旦CSS樣式部分已經完成了,那麼你可能還需要設置IE-模擬器。更新您的Web應用程序web.config文件幷包含下面的鍵。

<system.webServer> 
    <httpProtocol> 
     <customHeaders> 
     <clear /> 
     <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" /> 
     </customHeaders> 
    </httpProtocol> 

    </system.webServer>