JavaScript establece el foco en un elemento de formulario HTML

332

Tengo un formulario web con un cuadro de texto. ¿Cómo hago para configurar el foco en el cuadro de texto de forma predeterminada?

Algo como esto:

<body onload='setFocusToTextBox()'>

Entonces, ¿alguien puede ayudarme con eso? No sé cómo establecer el foco en el cuadro de texto con JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
javascript html textbox focus tenstar
fuente
21
Tan simple como document.getElementById('your_text_box_id').focus();.
Teemu

Respuestas:

576

Hacer esto.

Si tu elemento es algo como esto ...

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

Tu guión sería

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
mohkhan
fuente
3
Tendría que escanear el documento utilizando otras partes de la API web (por ejemplo Document.forms, Document.getelementsByTagNameo Node.childNodes) y confiar en una estructura de documento conocida o buscar algunas propiedades específicas del elemento.
Peter
40
O la respuesta obvia ... dale una identificación;)
Relevante
44
Aconsejaría no usar una identificación porque está demasiado especificada. En su lugar, use el nombre o incluso una clase. En ese caso, usaría document.querySelector ("[name = 'myText']") o document.querySelector (". MyText") para obtener una referencia al elemento de entrada.
Chris Love
12
@ChrisLove Consejos interesantes. ¿Por qué tener una identificación está "sobre especificada" y cuál es exactamente el problema con ella? Es más simple, más preciso y el código para localizarlo será un poco más rápido, con una identificación. A mí me parece la cosa más obvia y sensata, si es posible.
PandaWood
44
@ChrisLove, esto no es una especificación excesiva de un selector CSS, está configurando un atributo ID de HTML: la especificidad es un problema en la forma en que el procesamiento CSS analiza los selectores DOM, no un problema con la forma en que funcionan los atributos ID y de clase en HTML. No es aconsejable utilizar los mismos selectores DOM para adjuntar CSS a JS, lo que significa que puede mantener la diferenciación que describe
Toni Leigh
142

Para lo que vale, puede usar el autofocusatributo en navegadores compatibles con HTML5. Funciona incluso en IE a partir de la versión 10.

<input name="myinput" value="whatever" autofocus />
un mejor oliver
fuente
51
Tenga en cuenta que esto solo funciona para establecer el foco cuando la página se carga por primera vez; no se puede usar para establecer el foco más tarde en respuesta a la entrada.
Martin Carney
Me temo que el atributo de enfoque automático no es compatible si IOS Safari ( caniuse.com/#search=autofocus ) mientras que .focus () es incompatible con Opera Mini ( caniuse.com/#search=focus )
lfrodrigues
3
Tenga en cuenta que si está intentando enfocar desde la consola, ¡entonces no es posible!
O Choban el
65

Por lo general, cuando nos centramos en un cuadro de texto, también debemos desplazarnos a la vista

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

Comprueba si ayuda.

Khanh TO
fuente
2
Esto puede ser un verdadero dolor de cabeza en una pantalla más pequeña si el campo está fuera de la pantalla :-)
Toni Leigh
Si tiene una barra de encabezado fija, es posible que deba usar textbox.scrollIntoView (falso), esto simplemente establece el elemento en la parte inferior en lugar de en la parte superior.
DeadlyChambers
30

Si tu código es:

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

Y si está utilizando JQuery, también puede usar esto:

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

Tenga en cuenta que primero debe dibujar la entrada $(document).ready()

Richard Rebeco
fuente
11
Voté en contra de esto, porque remotamente no hay implicación de jQuery en la pregunta base. El OP quería permanecer puramente javascript
Fallenreaper
11
Bueno, tienes razón, me equivoqué, pero creo que de todos modos es útil.
Richard Rebeco
44
Estoy votando esto porque en proyectos donde jQuery ya se usa y sus elementos como objetos de selección de jQuery, es mejor ser coherente en lugar de usar vanilla JS.
paradita
8
Los votos negativos de @Fallenreaper son para egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, según el centro de ayuda de stackoverflow. No encuentro esto cerca de esas categorías. Ayudar no se limita al OP, ¿verdad?
Gellie Ann
@GellieAnn Si bien es una respuesta, se encuentra fuera del alcance de la pregunta de los OP. Hay una razón por la que está usando JavaScript de vainilla, y si bien puede mencionar otros marcos y dar punteros o sugerencias para conducir a uno y dar un razonamiento, aún debe resolver la respuesta dentro de los límites de la pregunta formulada. Por lo tanto, mantengo mi voto negativo.
Fallenreaper
20

Para Javascript simple, intente lo siguiente:

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

Solía ​​usar esto:

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

Dicho esto, puede usar el atributo de enfoque automático en HTML 5.

Tenga en cuenta: quería actualizar este hilo antiguo que muestra el ejemplo solicitado más la actualización más nueva y más fácil para aquellos que todavía leen esto. ;)

RajnishCoder
fuente
1

Como se mencionó anteriormente, document.forms también funciona.

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

setFocusToTextBox( 0 );
// sets focus on first element of the form
Mac
fuente
Forma yo sepa no tiene atributo "name"
Marecky
Los formularios han tenido "nombres" durante mucho tiempo y, en HTML5, todavía lo tienen. Ver w3.org/TR/html5/forms.html#the-form-element
Mac
1

Si su <input>o <textarea>tiene atributo id=mytext, use

mytext.focus();

Mostrar fragmento de código

Kamil Kiełczewski
fuente
0

window.onload es poner foco inicialmente en desenfoque es poner foco mientras haces clic fuera del área de texto, o evitar el desenfoque del área de texto

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

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