botón Enviar no enfocado aunque tabindex está configurado correctamente

Question

He definido el índice de pestaña para los campos de entrada en un formulario. Al desplazarse por los campos de entrada, el botón de enviar nunca obtiene el foco, algunos otros campos de entrada en una forma diferente en la página obtienen el foco. Todos tienen índices de pestañas superiores a 3. ¿Cómo es posible?

<form action="subscription.php" name="subscribe" method="post" onsubmit="return isValidEmailAndEqual()"> 
<p id="formlabel">E-mail</p> <input type="text" name="email1" tabindex=1> 

<br/> 
<p id="formlabel">Repeat e-mail</p> <input type="text" name="email2" tabindex=2> <br/> 
<input id="inputsubmit" type="submit" value="Subscribe" tabindex=3> 
</form> 

CSS:

input { 
    background-color : #333; 
    border: 1px solid #EEE; 
    color: #EEE; 
    margin-bottom: 6px; 
    margin-top: 4px; 
    padding: 1px; 
    width : 200px; 
} 

#inputsubmit { 
    background-color : #d7e6f1; 
    border: 1px solid #EEE; 
    color: #0000ff; 
    margin-bottom: 6px; 
    margin-top: 4px; 
    padding: 1px; 
    width : 200px; 
} 

#inputsubmit:hover { 
    cursor: pointer; cursor: hand; 
    background-color : #d7e6f1; 
    border: 1px solid #0000ff; 
    color: #0000ff; 
    margin-bottom: 6px; 
    margin-top: 4px; 
    padding: 1px; 
    width : 200px; 
} 

p#formlabel{ 
    width: 100; 
} 

Answer 1

Es una característica de Mac que solo le permite tabular cuadros de entrada de pensamiento y listas de forma predeterminada. Tabulación a través de todos los controles es una opción avanzada:

http://support.mozilla.com/en-US/kb/Pressing+Tab+key+does+not+select+menus+or+buttons

Firefox en Mac copias este comportamiento por defecto del sistema operativo.

Answer 2

Usted no tiene que definir índices de tabulación, que también podría renunciar a ellos - a menos que desee modificar el orden natural de ellos cuando son ordenados por su creación. Intente sacarlos por completo y vea si funciona más a su gusto.

Answer 3

Ok, vamos a ver. He intentado con el código anterior en Firefox (Mac, Windows), Safari (Mac) e IE (Windows). Aquí están mis resultados:

Al utilizar

<button name="thename" type="submit">Subscribe</button> 

o

<input id=\"inputsubmit\" type=\"submit\" value=\"Subscribe\"> 

para enviar el formulario (mismo resultado):

• FF (Win) - Cuando la tabulación, la el foco presiona el botón
• FF (Mac) - Cuando se tabula, el foco no está presionando el botón.
• Safari (Mac): cuando se selecciona, el enfoque no es presionar el botón.
• IE (Win): cuando se realiza una tabulación, el botón parece estar en algún tipo de foco todo el tiempo y el botón tendrá un enfoque extra cuando se muestre en i.
• Para todos, cuando un elemento dentro del formulario tiene el foco, es posible presionar enter para "hacer clic" en el botón de enviar.

supongo que la conclusión tiene que ser así:

1. diferentes navegadores se comportan de manera diferente. Incluso el mismo navegador se comporta de manera diferente en diferentes sistemas operativos (FF).

2. El comportamiento predeterminado de un formulario es que presionando enter enviará el formulario con el primer botón de enviar en el formulario.

3. Creo que es una lástima que el enfoque no toque el botón al tabbrar, porque creo que muchos usuarios esperan concentrarse en el elemento antes de presionar enter.

¿O qué dice usted ...?

Answer 4

Este es un problema de Mac OS X.Su Mac puede estar configurada para que no le permita tabular elementos que no sean campos de texto (por ejemplo, botones). Puede cambiar esto yendo a las preferencias del sistema para el teclado. Luego haga clic en la pestaña de shorcut y mire hacia abajo y elija la opción para permitir el enfoque en todos los controles. Ahora debería poder concentrarse en los botones de Safari y Firefox, además de todos los botones en Mac OS.

Para cambiar rápidamente la configuración de su Mac, presione CTRL + F7 (o si está utilizando un teclado Mac, intente mantener presionada la tecla de función y presionar CTRL + F7).