JavaScript définit le focus sur l'élément de formulaire HTML

332

J'ai un formulaire Web contenant une zone de texte. Comment puis-je définir le focus sur la zone de texte par défaut?

Quelque chose comme ça:

<body onload='setFocusToTextBox()'>

alors quelqu'un peut-il m'aider? Je ne sais pas comment définir le focus sur la zone de texte avec JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
javascript html textbox focus tenstar
la source
21
Aussi simple que document.getElementById('your_text_box_id').focus();.
Teemu

Réponses:

576

Faites ça.

Si votre élément est quelque chose comme ça ..

<input type="text" id="mytext"/>

Votre script serait

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
mohkhan
la source
3
Vous devez numériser le document à l'aide d'autres parties de l'API Web (par exemple Document.forms, Document.getelementsByTagNameou Node.childNodes) et vous fier à une structure de document connue ou rechercher des propriétés spécifiques à un élément.
peterph
40
Ou la réponse évidente ... donnez-lui une pièce d'identité;)
Pertinent
4
Je déconseille d'utiliser un identifiant car il est trop spécifié. Utilisez plutôt le nom ou même une classe. Dans ce cas, vous utiliseriez document.querySelector ("[name = 'myText']") ou document.querySelector (". MyText") pour obtenir une référence à l'élément d'entrée.
Chris Love
12
@ChrisLove Conseils intéressants. Pourquoi un identifiant est-il "sur-spécifié" et quel est exactement le problème? C'est plus simple, plus précis et le code pour le localiser, sera légèrement plus rapide, avec un identifiant. Cela me semble être la chose la plus évidente et la plus sensée à faire, si c'est possible.
PandaWood
4
@ChrisLove, cela ne spécifie pas trop un sélecteur CSS, il définit un attribut ID HTML - la spécificité est un problème dans la façon dont le traitement CSS analyse les sélecteurs DOM, pas un problème avec la façon dont les attributs ID et classe fonctionnent en HTML. Il n'est pas conseillé d'utiliser les mêmes sélecteurs DOM pour attacher CSS que pour attacher JS, ce qui signifie que vous pouvez conserver la différenciation que vous décrivez
Toni Leigh
142

Pour ce que ça vaut, vous pouvez utiliser l' autofocusattribut sur les navigateurs compatibles HTML5. Fonctionne même sur IE à partir de la version 10.

<input name="myinput" value="whatever" autofocus />
un meilleur oliver
la source
51
Gardez à l'esprit que cela ne fonctionne que pour définir le focus lors du premier chargement de la page; il ne peut pas être utilisé pour définir le focus ultérieurement en réponse à la saisie.
Martin Carney
Je crains que l'attribut autofocus ne soit pas compatible si IOS Safari ( caniuse.com/#search=autofocus ) tandis que .focus () est tout simplement incompatible avec Opera Mini ( caniuse.com/#search=focus )
lfrodrigues
3
Notez que si vous essayez de vous concentrer à partir de la console, ce n'est pas possible!
Ou Choban
65

Habituellement, lorsque nous nous concentrons sur une zone de texte, nous devons également faire défiler la vue

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

Vérifiez si cela aide.

Khanh TO
la source
2
Cela peut être un vrai casse-tête sur un écran plus petit si le champ est hors écran :-)
Toni Leigh
Si vous avez une barre d'en-tête qui est fixe, vous devrez peut-être utiliser textbox.scrollIntoView (false), cela place simplement l'élément en bas au lieu du haut.
DeadlyChambers
30

Si votre code est:

<input type="text" id="mytext"/>

Et si vous utilisez JQuery, vous pouvez également l'utiliser:

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

Gardez à l'esprit que vous devez d'abord dessiner l'entrée $(document).ready()

Richard Rebeco
la source
11
J'ai rétrogradé cela, car il n'y a à distance aucune implication de jQuery dans la question de base. L'OP voulait rester purement javascript
Fallenreaper
11
Eh bien, vous avez raison, je me suis trompé, mais je pense que c'est quand même utile.
Richard Rebeco
4
Je vote positivement parce que dans les projets où jQuery est déjà utilisé et vous éléments en tant qu'objets de sélection jQuery, il est préférable d'être cohérent au lieu d'utiliser vanilla JS.
paradite
8
@Fallenreaper Downvotes sont pour egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, selon le centre d'aide de stackoverflow. Je trouve cela loin de ces catégories. L'aide ne se limite pas au PO, n'est-ce pas?
Gellie Ann
@GellieAnn Bien qu'il s'agisse d'une réponse, elle n'entre pas dans le cadre de la question des PO. Il y a une raison pour laquelle il utilise du javascript vanille, et bien que vous puissiez mentionner d'autres cadres et donner des pointeurs ou des conseils pour en mener un et expliquer pourquoi, vous devez toujours résoudre la réponse dans les limites de la question posée. Par conséquent, je maintiens mon downvote.
Fallenreaper
20

Pour du Javascript simple, essayez ce qui suit:

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};
sipp
la source
3

J'utilisais juste ceci:

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

Cela dit, vous pouvez simplement utiliser l'attribut autofocus dans HTML 5.

Veuillez noter: je voulais mettre à jour cet ancien fil de discussion montrant l'exemple demandé ainsi que la mise à jour plus récente et plus facile pour ceux qui lisent encore ceci. ;)

RajnishCoder
la source
1

Comme mentionné précédemment, document.forms fonctionne également.

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form
Mac
la source
Le formulaire AFAIK n'a pas d'attribut "nom"
Marecky
Les formulaires ont depuis longtemps des "noms", et en HTML5, ils le font toujours. Voir w3.org/TR/html5/forms.html#the-form-element
Mac
1

Si votre <input>ou <textarea>possède un attribut, id=mytextutilisez

mytext.focus();

Afficher l'extrait de code

Kamil Kiełczewski
la source
0

window.onload consiste à mettre le focus initialement surblur, c'est à mettre le focus pendant que vous cliquez en dehors de la zone de texte, ou d'éviter le flou de la zone de texte

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
ßãlãjî
la source