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>

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>

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

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.


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


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();
};

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. ;)


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

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


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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.