Problème d'ordre de tabulation dans IE avec initialisation de Javascript sélection de champ dans le formulaire

J'essaye d'obtenir le comportement suivant en html: l'utilisateur est présenté avec un formulaire impliquant plusieurs champs de texte. Les champs sont remplis avec des valeurs par défaut, mais dans de nombreux cas, l'utilisateur souhaite entrer le sien. Lorsque la page est chargée, la valeur dans le premier champ est sélectionnée, de sorte que l'utilisateur peut soit la remplacer en commençant simplement à taper et en tabulant sur le champ suivant, soit à simplement le quitter et sortir par tabulation. Voici un exemple épuré de ce que j'ai:Problème d'ordre de tabulation dans IE avec initialisation de Javascript sélection de champ dans le formulaire

<html> 
    <body onload="document.getElementById('helloField').select()"> 
     <form> 
      <input id="helloField" value="hello"/><br/> 
      <input value="goodbye"/><br/> 
      <input type="submit" value="Submit"/> 
     </form> 
    </body> 
</html>

Cela fonctionne dans Chrome (et Firefox je crois, mais je ne l'ai pas ici). Dans IE, le champ est sélectionné comme prévu, mais lorsque l'utilisateur touche l'onglet, le navigateur affiche sa barre d'adresse plutôt que le champ d'au revoir. Si je remplace la sélection avec un accent simple, comme

<body onload="document.getElementById('helloField').focus()">

l'est correct dans tabbing tous les navigateurs, mais ce n'est pas ce que je veux. Je veux que l'utilisateur puisse commencer à taper tout de suite pour remplacer la valeur par défaut.

Vous avez des idées?

Merci.

Source

2009-03-09 jjujuma

Focus, puis sélectionnez.

Pensez également à placer le code dans un bloc de script directement après l'entrée en question. Si vous avez un tas d'images sur la page, document.onload peut tirer beaucoup plus tard, et la dernière chose que vous voulez est de taper dans une boîte de saisie quand onload se déclenche et détourne votre attention (ce qui vous oblige à supprimer le contenu de la boîte).

<input id="helloField" value="hello"/><br/> 
<script type="text/javascript"> 
    var hello= document.getElementById('helloField'); 
    hello.focus(); 
    hello.select(); 
</script>

Source

2009-03-10 04:29:25 bobince

Essayez le réglage de l'ordre de tabulation des champs à l'aide tabindex:

<html> 
    <body onload="document.getElementById('helloField').select()"> 
     <form> 
      <input id="helloField" value="hello" tabindex="1" /><br/> 
      <input value="goodbye" tabindex="2" /><br/> 
      <input type="submit" value="Submit" tabindex="3" /> 
     </form> 
    </body> 
</html>

Source

2009-03-09 22:16:11 Marius

Malheureusement, cela n'a pas fonctionné. – jjujuma

Problème d'ordre de tabulation dans IE avec initialisation de Javascript sélection de champ dans le formulaire

Répondre

Questions connexes