JavaScript setzt den Fokus auf das HTML-Formularelement

331

Ich habe ein Webformular mit einem Textfeld. Wie setze ich den Fokus standardmäßig auf das Textfeld?

Etwas wie das:

<body onload='setFocusToTextBox()'>

Kann mir jemand dabei helfen? Ich weiß nicht, wie ich mit JavaScript den Fokus auf das Textfeld setzen soll.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
javascript html textbox focus Tenstar
quelle
21
So einfach wie document.getElementById('your_text_box_id').focus();.
Teemu

Antworten:

575

Mach das.

Wenn dein Element so etwas ist ..

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

Ihr Skript wäre

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
Mohkhan
quelle
3
Sie müssten das Dokument mit anderen Teilen der Web - API (zB scannen Document.forms, Document.getelementsByTagNameoder Node.childNodes) und entweder stützen sich auf eine bekannte Dokumentstruktur oder Aussehen für einige elementspezifischen Eigenschaften.
Peterph
40
Oder die offensichtliche Antwort ... gib ihm einen Ausweis;)
Relevant
4
Ich würde davon abraten, eine ID zu verwenden, da diese überbestimmt ist. Verwenden Sie stattdessen den Namen oder sogar eine Klasse. In diesem Fall würden Sie document.querySelector ("[name = 'myText']") oder document.querySelector (". MyText") verwenden, um einen Verweis auf das Eingabeelement abzurufen.
Chris Love
12
@ ChrisLove Interessante Ratschläge. Warum ist eine ID "überbestimmt" und was genau ist das Problem damit? Es ist einfacher, präziser und der Code zum Auffinden ist mit einer ID etwas schneller. Es klingt für mich nach der naheliegendsten und vernünftigsten Sache - wenn es möglich ist.
PandaWood
4
@ChrisLove Dies ist keine Überspezifikation eines CSS-Selektors, sondern das Festlegen eines HTML-ID-Attributs. Die Spezifität ist ein Problem bei der Analyse von DOM-Selektoren durch die CSS-Verarbeitung, kein Problem bei der Funktionsweise von ID- und Klassenattributen in HTML. Es ist nicht ratsam, zum Anhängen von CSS dieselben DOM-Selektoren zu verwenden wie zum Anhängen von JS, sodass Sie die von Ihnen beschriebene Differenzierung beibehalten können
Toni Leigh
142

Für das, was es wert ist, können Sie das autofocusAttribut in HTML5-kompatiblen Browsern verwenden. Funktioniert sogar im IE ab Version 10.

<input name="myinput" value="whatever" autofocus />
ein besserer oliver
quelle
51
Beachten Sie, dass dies nur zum Festlegen des Fokus beim ersten Laden der Seite funktioniert. Es kann nicht verwendet werden, um den Fokus später als Reaktion auf Eingaben festzulegen.
Martin Carney
Ich fürchte, das Autofokus-Attribut ist nicht kompatibel, wenn IOS Safari ( caniuse.com/#search=autofocus ), während .focus () nur nicht mit Opera Mini ( caniuse.com/#search=focus )
kompatibel ist
3
Beachten Sie, dass dies nicht möglich ist, wenn Sie versuchen, von der Konsole aus zu fokussieren!
Oder Choban
65

Wenn wir uns auf ein Textfeld konzentrieren, sollten wir normalerweise auch in die Ansicht scrollen

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

Überprüfen Sie, ob es hilft.

Khanh TO
quelle
2
Dies kann ein echtes Problem auf einem kleineren Bildschirm sein, wenn das Feld nicht auf dem Bildschirm angezeigt wird :-)
Toni Leigh
Wenn Sie eine feste Kopfzeile haben, müssen Sie möglicherweise textbox.scrollIntoView (false) verwenden. Dadurch wird das Element einfach nach unten anstatt nach oben gesetzt.
DeadlyChambers
30

Wenn Ihr Code lautet:

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

Und wenn Sie JQuery verwenden, können Sie dies auch verwenden:

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

Denken Sie daran, dass Sie zuerst die Eingabe zeichnen müssen $(document).ready()

Richard Rebeco
quelle
11
Ich habe dies abgelehnt, da die Basisfrage aus der Ferne keine Auswirkungen von jQuery hat. Das OP wollte rein Javascript bleiben
Fallenreaper
11
Nun, Sie haben Grund, ich habe mich geirrt, aber ich denke, dass es trotzdem hilfreich ist.
Richard Rebeco
4
Ich stimme dem zu, weil es in Projekten, in denen jQuery bereits verwendet wird und Sie Elemente als jQuery-Auswahlobjekte verwenden, besser ist, konsistent zu sein, als Vanilla JS zu verwenden.
Paradite
8
@Fallenreaper Downvotes sind egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrectlaut Stackoverflow-Hilfe für. Ich finde das bei weitem nicht in der Nähe dieser Kategorien. Helfen ist nicht auf das OP beschränkt, oder?
Gellie Ann
@GellieAnn Obwohl es sich um eine Antwort handelt, liegt sie außerhalb des Bereichs der OP-Frage. Es gibt einen Grund, warum er Vanille-Javascript verwendet, und obwohl Sie andere Frameworks erwähnen und Hinweise oder Hinweise geben können, um zu einem zu führen, und eine Begründung dafür geben sollten, sollten Sie die Antwort dennoch innerhalb der Grenzen der gestellten Frage lösen. Deshalb stehe ich zu meiner Ablehnung.
Fallenreaper
20

Versuchen Sie für einfaches Javascript Folgendes:

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

Früher habe ich nur folgendes benutzt:

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

Sie können jedoch einfach das Autofokus-Attribut in HTML 5 verwenden.

Bitte beachten Sie: Ich wollte diesen alten Thread aktualisieren, der das angeforderte Beispiel sowie das neuere, einfachere Update für diejenigen zeigt, die dies noch lesen. ;)

RajnishCoder
quelle
1

Wie bereits erwähnt, funktioniert document.forms auch.

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

setFocusToTextBox( 0 );
// sets focus on first element of the form
Mac
quelle
AFAIK Form hat kein "Name" -Attribut
Marecky
Formulare haben schon lange "Namen" und in HTML5 immer noch. Siehe w3.org/TR/html5/forms.html#the-form-element
Mac
1

Wenn Ihr <input>oder <textarea>ein Attribut id=mytexthat, verwenden Sie

mytext.focus();

Code-Snippet anzeigen

Kamil Kiełczewski
quelle
0

window.onload dient dazu, den Fokus zunächst auf Unschärfe zu setzen, um den Fokus zu setzen, während Sie außerhalb des Textbereichs klicken, oder Unschärfe im Textbereich zu vermeiden

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
ßãlãjî
quelle