JavaScript ha impostato lo stato attivo sull'elemento modulo HTML

332

Ho un modulo web con una casella di testo al suo interno. Come posso impostare lo stato attivo sulla casella di testo per impostazione predefinita?

Qualcosa come questo:

<body onload='setFocusToTextBox()'>

quindi qualcuno può aiutarmi con questo? Non so come focalizzare la casella di testo con JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>

— tenstar
fonte

21

Semplice come document.getElementById('your_text_box_id').focus();.

— Teemu,

576

Fai questo.

Se il tuo elemento è qualcosa del genere ..

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

La tua sceneggiatura sarebbe

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>

— mohkhan
fonte

3

Dovresti scansionare il documento usando altre parti dell'API Web (ad esempio Document.forms, Document.getelementsByTagNameo Node.childNodes) e fare affidamento su una struttura di documento nota o cercare alcune proprietà specifiche dell'elemento.

— peterph,

40

O la risposta ovvia ... dagli un ID;)

— Rilevante

4

Vorrei sconsigliare l'utilizzo di un ID perché è sopra specificato. Usa invece il nome o anche una classe. In tal caso useresti document.querySelector ("[name = 'myText']") o document.querySelector (". MyText") per ottenere un riferimento all'elemento di input.

— Chris Love,

12

@ChrisLove Consigli interessanti. Perché avere un ID "sopra specificato" e qual è esattamente il problema? È più semplice, più preciso e il codice per individuarlo, sarà leggermente più veloce, con un ID. Sembra la cosa più ovvia e ragionevole da fare, per me - se è possibile.

— PandaWood,

4

@ChrisLove non sta specificando eccessivamente un selettore CSS, sta impostando un attributo ID HTML - la specificità è un problema nel modo in cui l'elaborazione CSS analizza i selettori DOM, non un problema con il modo in cui gli attributi ID e classe funzionano in HTML. Non è consigliabile utilizzare gli stessi selettori DOM per collegare CSS in quanto è per collegare JS, il che significa che puoi mantenere la differenziazione che descrivi

— Toni Leigh

142

Per quello che vale, puoi usare l' autofocusattributo sui browser compatibili con HTML5. Funziona anche su IE dalla versione 10.

<input name="myinput" value="whatever" autofocus />

— un oliver migliore
fonte

51

Ricorda, questo funziona solo per impostare lo stato attivo al primo caricamento della pagina; non può essere utilizzato per impostare lo stato attivo in seguito in risposta all'input.

— Martin Carney,

Temo che l'attributo autofocus non sia compatibile se IOS Safari ( caniuse.com/#search=autofocus ) mentre .focus () non è compatibile con Opera Mini ( caniuse.com/#search=focus )

— lfrodrigues

3

Nota che se stai provando a mettere a fuoco dalla console, non è possibile!

— O Choban il

65

Di solito quando ci concentriamo su una casella di testo, dovremmo anche scorrere in vista

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

Controlla se aiuta.

— Khanh TO
fonte

2

Questo può essere un vero mal di testa su uno schermo più piccolo se il campo è fuori schermo :-)

— Toni Leigh

Se hai una barra di intestazione che è stata riparata, potresti dover usare textbox.scrollIntoView (false), questo semplicemente imposta l'elemento in basso invece che in alto.

— DeadlyChambers,

30

Se il tuo codice è:

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

E se stai usando JQuery, puoi usare anche questo:

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

Tieni presente che devi prima disegnare l'input $(document).ready()

— Richard Rebeco
fonte

11

Ho annullato il downgrade di questo, perché da remoto non vi sono implicazioni di jQuery nella domanda di base. L'OP voleva rimanere puramente javascript

— Fallenreaper il

11

Bene, hai ragione, ho sbagliato, ma penso che sia comunque utile.

— Richard Rebeco,

4

Sto valutando questo perché nei progetti in cui jQuery è già utilizzato e elementi come oggetti di selezione jQuery, è meglio essere coerenti invece di utilizzare JS vanilla.

— paradite,

8

@Fallenreaper I downvotes sono per egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, secondo il centro assistenza di stackoverflow . Non lo trovo da nessuna parte vicino a quelle categorie. Aiutare non si limita all'OP, vero?

— Gellie Ann,

@GellieAnn Sebbene sia una risposta, non rientra nell'ambito della domanda dei PO. C'è una ragione per cui sta usando javascript alla vaniglia, e mentre puoi menzionare altri framework e dare suggerimenti o suggerimenti per portarne uno e dare un ragionamento perché, dovresti comunque risolvere la risposta all'interno dei limiti della domanda posta. Pertanto, sostengo il mio voto negativo.

— Fallenreaper,

20

Per Javascript semplice, prova quanto segue:

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

— SIPP
fonte

3

Lo usavo solo:

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

Detto questo, puoi semplicemente usare l'attributo autofocus in HTML 5.

Nota: volevo aggiornare questo vecchio thread mostrando l'esempio richiesto più l'aggiornamento più recente e più semplice per coloro che stanno ancora leggendo questo. ;)

— RajnishCoder
fonte

1

Come accennato in precedenza, anche document.forms funziona.

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

setFocusToTextBox( 0 );
// sets focus on first element of the form

— Mac
fonte

Il modulo AFAIK non ha l'attributo "nome"

— Marecky

I moduli hanno avuto "nomi" da molto tempo ormai, e in HTML5 lo fanno ancora. Vedi w3.org/TR/html5/forms.html#the-form-element

— Mac

1

Se il tuo <input>o <textarea>ha un attributo, id=mytextusa

mytext.focus();

Mostra snippet di codice

function setFocusToTextBox() {
    mytext.focus();
}

<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>

Espandi frammento

— Kamil Kiełczewski
fonte

0

window.onload è quello di mettere a fuoco inizialmente onblur è di mettere a fuoco mentre si fa clic al di fuori dell'area di testo, o evitare la sfocatura dell'area di testo

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>

— ßãlãjî
fonte