2010-02-25 3 views
10

J'ai défini un index de tabulation pour les champs de saisie d'un formulaire. Lorsque vous passez d'un onglet à l'autre dans les champs de saisie, le bouton d'envoi ne reçoit jamais le focus, d'autres champs de saisie dans un formulaire différent sur la page obtiennent le focus. Ceux-ci ont tous des index de tabulation supérieurs à 3. Comment se fait-il?Le bouton Soumettre n'est pas mis en évidence même si tabindex est correctement défini

<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; 
} 
+0

J'ai essayé votre code et il "tabs" comme il se doit. Peut-être que quelque chose d'autre dans votre page interfère avec l'ordre de tabulation correct? – Select0r

+0

Merci pour votre réponse! Eh bien, ça ne marche pas à coup sûr (en utilisant Firefox). Pourrait-il avoir quelque chose à voir avec ma feuille de style? J'ai mis à jour ma question avec ma feuille de style. Je fais du vol stationnaire, par exemple, cela peut-il avoir un impact? – Nicsoft

Répondre

10

Il s'agit d'une "fonction" Mac qui vous permet uniquement d'afficher des boîtes de saisie et des listes par défaut. Tabulation à travers tous les contrôles est une option avancée:

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

Firefox sur Mac copies ce comportement OS par défaut.

+3

Se produit aussi sur Safari. Je pense que c'est une chose de Mac plutôt - et alors c'est si le navigateur obéit à la préférence du système d'exploitation. Aller à des paramètres de clavier dans Mavericks, puis activer "Tous les contrôles" sous Full Keyboard Access a fonctionné pour moi. – awidgery

0

Vous ne devez pas définir des index de l'onglet, vous pourriez aussi bien les donner - à moins que vous souhaitez modifier l'ordre naturel d'eux quand ils sont triés par leur création. Essayez de les prendre complètement et voir si cela fonctionne plus à votre goût.

+0

En fait, je n'avais aucun tabindexes défini auparavant. Mais comme il n'était pas possible de tabuler sur le bouton de soumission, j'ai pensé que je devais ajouter tabindexes. Mais ça n'a toujours pas aidé. J'ai mis à jour ma question avec mes données de feuille de style, au moins en partie ... Je ne sais pas si cela compte? – Nicsoft

+0

Il se concentre pour moi à la fois dans Firefox et Chrome - pensez-vous peut-être que vous ne pouvez pas le voir visiblement? Essayez d'ajouter un troisième style pour '#inputsubmit: focus' et voyez si cela fonctionne. – casraf

+0

Je peux réellement voir qu'un autre champ de saisie sous une forme différente obtient le focus. Le curseur clignote dans ce champ de saisie. J'ai essayé d'ajouter le style #inputsubmit: focus, mais il n'est pas déclenché pendant le tabulation. J'ai aussi essayé le safari, mais pas de chance. Assis sur un Mac, mais cela ne devrait pas faire de différence je suppose ... – Nicsoft

4

Ok, voyons. J'ai essayé le code ci-dessus dans Firefox (Mac, Windows), Safari (Mac) et IE (Windows). Voici mes conclusions:

Lorsque vous utilisez

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

ou

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

pour soumettre le formulaire (même résultat):

  • FF (Win) - Lorsque la tabulation, la le focus touche le bouton
  • FF (Mac) - Lors de la tabulation, le focus n'est pas frapper le bouton.
  • Safari (Mac) - Lors d'une tabulation, la mise au point n'appuie pas sur le bouton.
  • IE (Win) - Lors de la tabulation, le bouton semble être en permanence en veille et le bouton aura une mise au point supplémentaire lors de la tabulation sur i.
  • Pour tous, lorsqu'un élément à l'intérieur du formulaire a le focus, il est possible de simplement appuyer sur Entrée pour "cliquer" sur le bouton Soumettre.

Je suppose que la conclusion doit être comme ceci:

  1. Différents navigateurs se comportent différemment. Même le même navigateur se comporte différemment sur différents OS (FF).

  2. Le comportement par défaut d'un formulaire est que le fait d'appuyer sur Entrée envoie le formulaire en utilisant le premier bouton de soumission du formulaire.

  3. Je pense qu'il est dommage que le focus ne frappe pas le bouton lors de la tabulation parce que je pense que beaucoup d'utilisateurs s'attendent à la mise au point sur l'élément avant de frapper entrer.

Ou que dites-vous ...?

+1

1. Je pense que c'est le comportement du système d'exploitation qui est différent, pas le navigateur. Remarquez dans tous les navigateurs de la version Windows que vous avez le focus, alors que sur Mac vous ne le faites pas. 2. Le focus n'est pas activé, mais le comportement par défaut d'un formulaire est de le soumettre à l'aide du premier bouton d'envoi du formulaire. 3. Je ne connais pas les autres utilisateurs, mais je m'attends à cliquer sur Entrée lorsque j'en aurai fini avec le formulaire, peu importe ce qui est ciblé. – casraf

+0

2. J'ai mis à jour ma réponse pour refléter votre commentaire. 3. J'ai l'habitude d'appuyer sur le bouton et puis appuyez sur entrer, mais ma mère me dit que je suis unique alors ... – Nicsoft

+0

Haha. Eh bien, peut-être que vous l'êtes;) c'est un problème mineur, et comme je n'ai pas de Mac, je ne peux pas vraiment le voir en temps réel - donc je pense que c'est aussi hypothétique que possible. – casraf

9

Ceci est un problème de Mac OS X.Votre Mac peut être configuré pour ne pas vous permettre de mettre en tabulation des éléments autres que des champs de texte (par exemple, des boutons). Vous pouvez changer cela en allant dans les préférences du système pour le clavier. Ensuite, cliquez sur l'onglet Raccourci et regardez en bas et choisissez l'option permettant de se concentrer sur tous les contrôles. Vous devriez maintenant pouvoir vous concentrer sur les boutons de Safari et de Firefox en plus de tous les boutons de Mac OS. Pour modifier rapidement les paramètres de votre Mac, appuyez sur CTRL + F7 (ou si vous utilisez un clavier Mac, maintenez la touche de fonction enfoncée et appuyez sur CTRL + F7).

Questions connexes