Dừng IE khỏi làm nổi bật nút gửi đầu tiên theo biểu mẫu

Question

Hành vi được mong đợi khi nhập vào biểu mẫu có vẻ không được xác định trong HTML 4.01 Specification trong khi đặc điểm HTML 5 says phải là nút gửi đầu tiên trong biểu mẫu.

Internet Explorer (IE) làm nổi bật nút đầu tiên trong biểu mẫu khi biểu mẫu có tiêu điểm bằng cách thêm đường viền độc quyền hoặc thứ gì đó. Các trình duyệt khác không thêm đầu mối trực quan như vậy.

Tôi muốn sử dụng một nút khác làm nút mặc định và kiểu này để tất cả trình duyệt sẽ cung cấp một đầu mối trực quan rằng đó là nút mặc định. (Chúng tôi đang sử dụng ASP.NET trong đó sử dụng một hình thức cho mỗi trang, và do đó rất khó để thiết kế các trang để nút mặc định luôn luôn đến đầu tiên.)

Trong khi tôi có thể dễ dàng thực hiện điều này với javascript và css trong hầu hết các trình duyệt , Tôi gặp sự cố khi khiến IE ngừng làm nổi bật nút đầu tiên.

Có cách nào để yêu cầu IE KHÔNG đánh dấu nút gửi đầu tiên hoặc để đánh dấu một nút khác không? Hoặc là có một số giải pháp khác mà tôi đã bỏ lỡ?

Answer 1

Trên điều khiển nút asp.net của bạn, hãy đặt useSubmitBehavior="false". Điều đó làm cho html như một nút chứ không phải là gửi.

Answer 2

Điều gì về việc xác định một kiểu CSS cụ thể (hoặc lớp) cho nút này?

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

Answer 3

Nếu bạn đang sử dụng Net 2 this có thể giúp bạn

... Sử dụng các tài sản DefaultFocus để truy cập điều khiển trên biểu mẫu để hiển thị như kiểm soát với đầu vào tập trung khi điều khiển HtmlForm là được tải. Các điều khiển có thể được chọn được hiển thị với một dấu hiệu trực quan cho biết rằng chúng có tiêu điểm. Ví dụ, một điều khiển TextBox với tiêu điểm được hiển thị với chèn điểm được đặt bên trong của nó. ...

Answer 4

Một cách để giải quyết vấn đề này là tạo nút giả ở đầu biểu mẫu và di chuyển nó ra khỏi tầm nhìn. Sau đó, xử lý nhập keycode trong javascript và phong cách nút mặc định mới với css.

Cảm thấy bẩn. Bất kỳ ý tưởng tốt hơn?

Answer 5

ASP.Net 2.0 cũng giới thiệu khái niệm về DefaultButton.

này có sẵn trên ít nhất Mẫu và Bảng điều chỉnh yếu tố:

<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> 

Vì vậy, khi bạn tải trang, hoặc đang nhập văn bản trong TextBox1, nhấn Enter sẽ nộp Button2. Khi bạn đang nhập văn bản trong TextBox2 nhấn Enter sẽ gửi Button3 - khi bạn đang ở trong Panel.

Điều này được cung cấp bởi phương pháp onkeypress được tạo bởi ASP.Net.

Khi tải trang, IE và Firefox đều làm nổi bật Button2 (như bạn muốn).

Nếu bạn biết nút nào sẽ được khai báo là nút mặc định, bạn có thể sử dụng CSS nào bạn thường sử dụng để tạo kiểu cho tất cả các trình duyệt.

Thay vì khó chịu, khi bạn tập trung vào hộp văn bản, IE sau đó sẽ làm nổi bật (không chính xác) làm nổi bật Button1.

Điều này là do hành vi mặc định của IE sẽ bị thay thế bởi một số javascript phát ra bởi ASP.Net:

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

Nhưng, IE sau đó sẽ bỏ qua rằng một khi yếu tố khác đã tập trung, và quay trở lại để làm nổi bật nút sai (không được sử dụng trừ khi người dùng nhấp vào nó một cách rõ ràng trong ví dụ này).

Ngoài việc thay thế chúng bằng các nút hình ảnh, tôi không chắc chắn những gì khác tôi có thể đề xuất.

Answer 6

Sử dụng một trong các Styles 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; } 

HOẶC

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

Khi phần CSS Phong cách được thực hiện, sau đó bạn cũng có thể cần phải thiết lập IE-Emulator. Cập nhật tệp web.config của ứng dụng web của bạn và bao gồm khóa bên dưới.

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

    </system.webServer>