Comment puis-je définir le focus sur le premier élément de saisie dans un formulaire HTML, indépendant de la carte d'identité?

Est-il un moyen simple de définir le focus (curseur de saisie) d'une page web sur le premier élément d'entrée (zone de texte, liste déroulante, ...) sur le chargement de la page sans avoir à connaître l'id de l'élément?

Je voudrais la mettre en œuvre comme un script commun pour toutes mes pages/les formes de mon application web.

REMARQUE si le formulaire est placé en bas de page, ainsi que l'utilisateur a à faire défiler la page pour voir le formulaire,en définissant l'accent sera automatiquement défiler en bas de la page comme un point d'ancrage ferait. Ce n'est pas très bonne cause à l'utilisateur arriver à une telle page verrait immédiatement défile vers le bas de la forme de la position. Je l'ai testé sur Safari et FF (IE7 ne pas effectuer le défilement des pages).
Mon application web est structuré de façon à ce que chaque page a son boîtes de saisie en haut de la fenêtre.
que faire si l'utilisateur redimensionné la fenêtre du navigateur hauteur à quelque chose de plus petit que 768px. Page faites défiler jusqu'à l'endroit où vous mettez le focus. De toute façon, je voulais seulement vous avertir au cas où vous ne saviez pas à propos de ces problèmes mineurs, je ne savais pas non plus avant de faire quelques tests.

InformationsquelleAutor splattne | 2008-11-10

96

Vous pouvez également essayer de jQuery en fonction de la méthode:
```
$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});
```
- Il Fonctionne! Je commence à intégrer jQuery dans mon application web. Donc, je pense que je vais coller avec cette approche! Merci beaucoup, Marko!
- Qu'advient-il si le premier formulaire de la page est cachée dans ce cas? Ou si le premier élément de la forme est caché via CSS? Assurément, ce serait un échec. Je suis pédant, bien sûr, mais c'est comment je roule.
- Dans mon cas (à l'aide de ASP.NET) j'ai juste UNE forme qui n'est jamais caché. Si cela fonctionne pour moi.
- Hughes, vous pouvez l'écrire comme une fonction et de l'appeler quand u ont besoin, et vous pouvez faire des exceptions. Pour moi cette solution a vraiment aidé.
- ce n'est pas de travail pour moi pour une raison quelconque. ne devrais-je pas voir un curseur.
- S'il vous plaît, collez votre code HTML, quelque part.
- Cette légèrement version plus simple devrait suffire: $(':input[type!=hidden]:first').focus()
InformationsquelleAutor Marko Dumic
127

Bien que cela ne répond pas à la question (nécessitant un script commun), je pensais qu'il pourrait être utile pour les autres de savoir que le HTML5 introduit le "autofocus" attribut:
```
<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>
```
Plongez dans HTML5 a plus d'informations.
- l'autofocus est le nom de l'attribut . Qu'en est sa valeur ?Somethig comme l'autofocus=true n'est pas nécessaire ? Que signifie le fait de ne pas mettre de valeur ?
- En HTML5, certains attributs n'ont pas besoin d'avoir une valeur de "cochées" est un autre attribut lorsque c'est le cas. Je crois que lorsque la valeur est laissé de côté, il est implicite que c'est le même que le nom (par exemple, l'autofocus="autofocus" et checked="checked").
- Mon Printemps application des pauses lorsque j'essaie d'utiliser autofocus avec aucune valeur sur spring:form. autofocus="autofocus" fonctionne très bien, cependant. Merci, @Jacob.
- L'attribut autofocus, comme beaucoup d'autres, est un attribut booléen type. C'est pourquoi elle n'est utilisée que de manière déclarative, non pas par affectation d'une valeur à elle. Voir plus de détails dans spec w3c: w3.org/TR/html5/infrastructure.html#boolean-attribute
InformationsquelleAutor Jacob Stanley
30
```
document.forms[0].elements[0].focus();
```
Ce peut être affiné à l'aide d'une boucle par exemple. ne pas se concentrer sur certains types de terrain, les handicapés champs et ainsi de suite. Mieux peut-être d'ajouter une class="autofocus" pour le domaine vous fait ne voulez concentré, et de la boucle sur les formes[i].les éléments[j] à la recherche pour que className.

De toute façon: il n'est pas normalement une bonne idée de le faire sur chaque page. Lorsque vous vous concentrez d'une entrée de l'utilisateur perd la possibilité de par exemple. faites défiler la page à partir du clavier. En cas d'imprévu, cela peut être gênant, de sorte que seule l'auto-focus lorsque vous êtes sûr que l'utilisation du champ de formulaire va être ce que l'utilisateur veut faire. c'est à dire. si vous êtes à la Google.
- Devrait être la bonne réponse, car la question n'a pas de jquery tag.
InformationsquelleAutor bobince
17

Le plus complet du jQuery expression que j'ai trouvé de travail est (grâce à l'aide de plus de ici)
```
$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});
```
- J'ai été en utilisant cette, remarqué elle tourne très lentement sur IE quand un grand nombre >1000 de cases à cocher dans un tableau. Vous ne savez pas quoi faire à ce sujet, pourrait avoir à abandonner en se concentrant sur le premier champ de saisie.
InformationsquelleAutor ngeek
7

Si vous êtes à l'aide de la Prototype framework JavaScript vous pouvez ensuite utiliser la focusFirstElement méthode:
```
Form.focusFirstElement(document.forms[0]);
```
InformationsquelleAutor John Topley
6

Il y a une écriture-up ici que l'on peut utiliser: Définir le Focus à la Première Entrée sur la Page Web

InformationsquelleAutor Galwegian
5

Vous avez également besoin de passer tout caché entrées.
```
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
```
- J'ai peut-être tort, mais cette boucle n'a pas de comportement défini si forms[0] n'a pas caché entrées.
- Exactement. Il est utilisé pour ignorer tous les principaux caché entrées. Et il est écrit en vertu de l'hypothèse qu'il existe des non-champs masqués dans le formulaire. J'aurais pu le faire avec jQuery ainsi (je vais poster une autre réponse), mais vous n'avez pas mentionné que vous voulez jQuery impliqués.
- Pourquoi gaspiller de la mémoire si vous pouvez utiliser un while déclaration?
InformationsquelleAutor Marko Dumic
3

Mettre ce code à la fin de votre body tag mettra l'accent de la première visible, non caché, activé l'élément sur l'écran automatiquement. Il prendra en charge la plupart des cas, je peux venir avec un court préavis.
```
<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>
```
- Une chose à considérer ici est qu'il peut correspondre à des éléments qui ne sont pas eux-mêmes cachés, mais un ancêtre est. Que nécessiterait le suivi de sauvegarder les DOM et en les testant à chaque ancêtres visibilité qui me semble sérieux excessif pour ce genre de situation.
- Ce sujet de <input type="text" readonly="readonly"> je pense que vous devriez ajouter un tel cas, de votre code. Normalement, les gens ne veulent pas se concentrer sur un readonly champ de saisie de texte. De toute façon, nice code et +1 merci!
- Non testé mais j'ai mis à jour avec !les formes[i][j].readonly != undefined
InformationsquelleAutor James Hughes
3

Essayé des tas de réponses ci-dessus et ils n'ont pas de travail. Trouvé à: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317
Merci Kolodvor.
```
$("input:text:visible:first").focus();
```
InformationsquelleAutor Max West
2

Cela devient la première visible entrée commune, y compris ces zones de texte et des listes de sélection. Cela assure également qu'ils ne sont pas cachés, les personnes handicapées ou en lecture seule. il permet également une cible div, que j'utilise dans mon logiciel (c'est à dire, la première entrée à l'intérieur de cette forme).
```
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();
```
InformationsquelleAutor Dave K

Je suis en utilisant ceci:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();

InformationsquelleAutor Robert Brooker

1

Pour ceux qui utilisent JSF2.2+ et ne peut pas passer de l'autofocus comme un attribut sans valeur, utilisez ceci:
```
 p:autofocus="true"
```
Et l'ajouter à l'espace de noms p (Également souvent utilisé pt. Tout ce que vous voulez).
```
<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
```
InformationsquelleAutor feder
0

Avec AngularJS :
```
angular.element('#Element')[0].focus();
```
InformationsquelleAutor EpokK

Cela inclut les textareas et exclut les boutons radio

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});

InformationsquelleAutor HectorPerez

Vous devriez être en mesure d'utiliser clientHeight au lieu de vérifier l'attribut d'affichage, car un parent pourrait se cacher cet élément:

function setFocus() {
    var forms = document.forms || [];
        for (var i = 0; i < forms.length; i++) {
            for (var j = 0; j < forms[i].length; j++) {
            var widget = forms[i][j];
                if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
                 && (typeof widget.disabled === "undefined" || widget.disabled === false)
                 && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
                        widget.focus();
                        break;
                }
            }
        }
    }   
}

InformationsquelleAutor thecoolmacdude

0

Sans tiers libs, utilisez quelque chose comme
```
  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }
```
Assurez-vous d'examiner tous les éléments de formulaire balises, la règle dissimulés/désactivé, comme dans d'autres réponses, et ainsi de suite..

InformationsquelleAutor cghislai
0

sans jquery, par exemple, régulièrement javascript:
```
document.querySelector('form input:not([type=hidden])').focus()
```
fonctionne sur Safari mais pas Chrome 75 (avril 2019)

InformationsquelleAutor localhostdotdev

Vous devez vous connecter pour publier un commentaire.