Jak ustawić fokus na elemencie w formularzu HTML za pomocą JavaScript?

Mam formularz internetowy z polem tekstowym. Jak ustawić domyślnie fokus na polu tekstowym?

Coś takiego: 

<body onload='setFocusToTextBox()'>
Czy ktoś może mi z tym pomóc? Nie wiem, jak ustawić fokus na polu tekstowym z JavaScript. 
<script>
  function setFocusToTextBox(){
    //What to do here
  }
</script>
Author: Flimm, 2013-07-06
Source

9 answers

Zrób to.

Jeśli twój element jest czymś takim..

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

Twój skrypt będzie 

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
 610
Author: mohkhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-06 07:21:02

Jeśli to coś warte, możesz użyć atrybutu autofocus w przeglądarkach kompatybilnych z HTML5. Działa nawet na IE od wersji 10.

<input name="myinput" value="whatever" autofocus />
 149
Author: a better oliver,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-06 07:30:03

Zwykle, gdy skupiamy się na polu tekstowym, powinniśmy również przewijać do widoku 

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}
Sprawdź, czy to pomoże.
 68
Author: Khanh TO,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-06 07:25:28

Jeśli Twój kod to: 

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

I jeśli używasz JQuery, możesz również użyć tego: 

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

Pamiętaj, że najpierw musisz narysować dane wejściowe $(document).ready()

 32
Author: Richard Rebeco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-22 11:41:05

Dla zwykłego Javascript, spróbuj wykonać następujące czynności: 

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};
 21
Author: sipp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-06 07:21:42

Kiedyś używałem tego: 

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

To powiedziawszy, możesz po prostu użyć atrybutu autofocus w HTML 5.

Uwaga: chciałem zaktualizować ten stary wątek pokazując przykład zadany plus nowszą, łatwiejszą aktualizację dla tych, którzy nadal to czytają. ;)

 3
Author: RajnishCoder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-22 10:36:50

Jak wspomniano wcześniej, dokument.formularze też działają.

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

setFocusToTextBox( 0 );
// sets focus on first element of the form
 1
Author: Mac,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-22 15:27:54

Jeśli Twoje <input> lub <textarea> ma atrybut id=mytext to użyj 

mytext.focus();


function setFocusToTextBox() {
    mytext.focus();
}
<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>
 1
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-09 07:56:30

Okno.onload ma początkowo skupić się na onblur polega na ustawieniu ostrości podczas klikania poza obszarem tekstowym lub unikaniu obszaru tekstowego blur 

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
 0
Author: ßãlãjî,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-11 02:55:40