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

Question

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

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

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

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

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

Answer 1

На вашем кнопочном элементе asp.net установите useSubmitBehavior="false". Это отображает HTML как кнопку, а не как отправку.

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

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

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

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

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

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

.

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

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

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

Answer 3

Используйте любой из этих стилей 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 Style будет готова, вам также может понадобиться установить IE-Emulator. Обновите файл 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>

Answer 4

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

Хотя чувствует себя грязным. Есть идеи получше?

Answer 5

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

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

Answer 6

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

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