web-dev-qa-db-fra.com

JavaScript met le focus sur l'élément de formulaire HTML

J'ai un formulaire Web avec une zone de texte. Comment procéder pour 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>
javascripthtmltextboxfocus
306
tenstar

Fais ç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>
533
mohkhan

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

<input name="myinput" value="whatever" autofocus />
132
a better oliver

Habituellement, lorsque nous nous concentrons sur une zone de texte, nous devrions également faire défiler

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

Vérifiez si cela aide.

62
Khanh TO

Si votre code est:

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

Et si vous utilisez JQuery, vous pouvez aussi utiliser ceci:

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

N'oubliez pas que vous devez d'abord dessiner l'entrée $(document).ready()

26
Richard Rebeco

Pour un langage Javascript simple, essayez ce qui suit:

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

J'avais l'habitude d'utiliser 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.

Remarque: je souhaitais mettre à jour cet ancien fil de discussion en reprenant l'exemple demandé, ainsi que la mise à jour la plus récente et la plus simple pour ceux qui lisent encore cette information. ;)

2
user6558655

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
1
Mac

window.onload est de mettre le focus initialement sur blur, c’est de mettre le focus lorsque 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>
0
ßãlãjî

Si votre <input> ou <textarea> a l'attribut id=mytext, utilisez

mytext.focus();

function setFocusToTextBox() {
    mytext.focus();
}
<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>
0
Kamil Kiełczewski