Остановка IE от выделения первой кнопки отправки в форме

Ожидаемое поведение при вводе в форме, как представляется, undefined в Спецификация HTML 4.01, в то время как спецификация HTML 5 говорит, это должна быть первая кнопка отправки в форме.

Internet Explorer (IE) выделяет первую кнопку в форме, когда форма фокусируется, добавляя проприетарную границу или что-то в этом роде. Другие браузеры не добавляют такой визуальный ключ.

Я хотел бы использовать другую кнопку по умолчанию и стилю этой кнопки, чтобы все браузеры отображали визуальную подсказку, что она является кнопкой по умолчанию. (Мы используем ASP.NET, который использует одну форму на странице, поэтому сложно создавать страницы так, чтобы всегда была выбрана кнопка по умолчанию.)

В то время как я могу легко выполнить это с помощью javascript и css в большинстве браузеров, мне не удается заставить IE останавливать выделение первой кнопки.

Есть ли способ сказать IE НЕ выделить первую кнопку отправки или выделить другую кнопку? Или есть другое решение, которое я пропустил?

Ответ 1

В элементе управления кнопкой asp.net установите useSubmitBehavior="false". Это отображает html как кнопку, а не submit.

Ответ 2

В ASP.Net 2.0 также появилась концепция DefaultButton.

Это доступно по крайней мере для элементов формы и панели:

<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 - как вы находитесь внутри панели.

Это работает от метода onkeypress, созданного ASP.Net.

Когда страница загружается, IE и Firefox выделяют Button2 (как хотите).

Если вы знаете, какая кнопка будет объявлена как кнопка по умолчанию, вы можете использовать любой CSS, который обычно используется для стилей для всех браузеров.

Довольно раздражающе, когда вы фокусируете либо текстовое поле, IE затем (неправильно) выделяет Button1.

Это связано с тем, что поведение по умолчанию IE переопределяется некоторыми javascript, выпущенными ASP.Net:

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

Но тогда IE проигнорирует, что когда другой элемент имеет фокус, и вернитесь к подсветке неправильной кнопки (которая не будет использоваться, если пользователь явно не щелкнет ее в этом примере).

Помимо замены их кнопками изображения, я не уверен, что еще могу предложить.

Ответ 3

Один из способов обойти это - создать пустую кнопку в верхней части формы и вывести ее из поля зрения. Затем обработайте вводный код ввода в javascript и создайте новую кнопку по умолчанию с помощью css.

Чувствует себя грязным. Любые лучшие идеи?

Ответ 4

Используйте любой из этих стилей 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; }

ИЛИ

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

Как только часть стиля CSS будет выполнена, вам также может потребоваться установить IE-эмулятор. Обновите файл 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>

Ответ 5

Если вы используете .Net 2 это может помочь вам

... Используйте свойство DefaultFocus для доступ к элементу управления в форме отображать как элемент управления с вводом сосредоточиться, когда элемент управления HtmlForm загружен. Элементы управления, которые можно выбрать отображаются с визуальной подсказкой что они имеют фокус. Например, элемент управления TextBox с фокус отображается с вставкой точка, расположенная внутри него....

Ответ 6

Как определить определенный стиль CSS (или класс) для этой кнопки?

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