JavaScript ustawia fokus na element formularza HTML

331

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

Coś takiego:

<body onload='setFocusToTextBox()'>

więc czy ktoś może mi w tym pomóc? Nie wiem, jak ustawić fokus na polu tekstowym za pomocą JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
javascript html textbox focus tenstar
źródło
21
Tak proste jak document.getElementById('your_text_box_id').focus();.
Teemu,

Odpowiedzi:

575

Zrób to.

Jeśli twój element jest podobny do tego ...

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

Twój skrypt byłby

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
mohkhan
źródło
3
Trzeba by zeskanować dokument za pomocą innych części API Web (na przykład Document.forms, Document.getelementsByTagNamealbo Node.childNodes) i albo polegać na znanej strukturze dokumentu lub szukać pewnych specyficznych właściwości elementu.
peterph
40
Lub oczywista odpowiedź ... podaj jej identyfikator;)
Odpowiedni
4
Odradzam używanie identyfikatora, ponieważ jest on podany. Zamiast tego użyj nazwy lub nawet klasy. W takim przypadku użyłbyś document.querySelector („[name = 'myText']”) lub document.querySelector (". MyText"), aby uzyskać odniesienie do elementu wejściowego.
Chris Love
12
@ChrisLove Interesująca rada. Dlaczego posiadanie identyfikatora jest „zbyt szczegółowe” i na czym dokładnie polega problem? Jest prostszy, bardziej precyzyjny, a kod do jego zlokalizowania będzie nieco szybszy, z identyfikatorem. Dla mnie to brzmi jak najbardziej oczywista i rozsądna rzecz - jeśli to możliwe.
PandaWood,
4
@ChrisLove to nie przesadnie określa selektor CSS, ustawia atrybut HTML ID - specyficzność jest problemem w sposobie, w jaki przetwarzanie CSS analizuje selektory DOM, a nie problemem, w jaki sposób działają atrybuty ID i klasy w HTML. Nie zaleca się używania tych samych selektorów DOM do dołączania CSS, jak do JS, co oznacza, że ​​można zachować opisywane różnicowanie
Toni Leigh
142

Aby uzyskać wartość, możesz użyć autofocusatrybutu w przeglądarkach zgodnych z HTML5. Działa nawet w IE od wersji 10.

<input name="myinput" value="whatever" autofocus />
lepsza oliwka
źródło
51
Należy pamiętać, że działa to tylko w celu ustawienia fokusa przy pierwszym ładowaniu strony; nie można go użyć do ustawienia ostrości później w odpowiedzi na dane wejściowe.
Martin Carney,
Obawiam się, że atrybut autofocus nie jest kompatybilny, jeśli IOS Safari ( caniuse.com/#search=autofocus ), podczas gdy .focus () jest po prostu niekompatybilny z Opera Mini ( caniuse.com/#search=focus )
lfrodrigues
3
Pamiętaj, że jeśli próbujesz skupić się na konsoli, nie jest to możliwe!
Lub Choban
65

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

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

Sprawdź, czy to pomaga.

Khanh TO
źródło
2
Może to być prawdziwy ból głowy na mniejszym ekranie, jeśli pole jest poza ekranem :-)
Toni Leigh
Jeśli masz naprawiony pasek nagłówka, może być konieczne użycie textbox.scrollIntoView (false), po prostu ustawia element na dole zamiast na górze.
DeadlyChambers
30

Jeśli twój kod to:

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

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

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

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

Richard Rebeco
źródło
11
Głosowałem za tym, ponieważ w pytaniu podstawowym nie ma żadnego wpływu na jQuery. OP chciał pozostać wyłącznie javascript
Fallenreaper
11
Cóż, masz powód, popełniłem błąd, ale myślę, że i tak jest to pomocne.
Richard Rebeco
4
Popieram to, ponieważ w projektach, w których jQuery jest już używany, a wy jako elementy selekcji jQuery, lepiej jest zachować spójność zamiast używać waniliowego JS.
paradite
8
@ Komentarze Fallenreaper są dla egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, zgodnie z centrum pomocy stackoverflow. Nie znajduję tego nigdzie w pobliżu tych kategorii. Pomaganie nie ogranicza się do PO, prawda?
Gellie Ann
@GellieAnn Chociaż jest to odpowiedź, leży poza zakresem pytania PO. Jest powód, dla którego używa on javascript waniliowy i chociaż możesz wspomnieć o innych ramach i podać wskazówki lub wskazówki, które prowadzą do jednego z nich, i podać powód, dla którego powinieneś nadal rozwiązywać odpowiedź w granicach zadanego pytania. Dlatego stoję przy moim przeglądzie.
Fallenreaper,
20

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

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};
łyk
źródło
3

Kiedyś po prostu 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ładowy przykład oraz nowszą, łatwiejszą aktualizację dla tych, którzy nadal go czytają. ;)

RajnishCoder
źródło
1

Jak wspomniano wcześniej, document.forms również działa.

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

setFocusToTextBox( 0 );
// sets focus on first element of the form
Prochowiec
źródło
Formularz AFAIK nie ma atrybutu „nazwa”
Marecky,
Formularze mają już „nazwy” od dłuższego czasu, a w HTML5 nadal je mają. Zobacz w3.org/TR/html5/forms.html#the-form-element
Mac
1

Jeśli twój <input>lub <textarea>ma atrybut, id=mytextużyj

mytext.focus();

Pokaż fragment kodu

Kamil Kiełczewski
źródło
0

window.onload ma na początku ustawić fokus onblur ma nałożyć fokus podczas klikania poza obszarem tekstowym lub uniknąć rozmycia obszaru tekstowego

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
ßãlãjî
źródło