¿Cómo se configura automáticamente el foco en un cuadro de texto cuando se carga una página web?

Respuestas:

245

Si estás usando jquery:

$(function() {
  $("#Box1").focus();
});

o prototipo:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

o JavaScript simple:

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

aunque tenga en cuenta que esto reemplazará a otros controladores de carga, así que busque addLoadEvent () en google para encontrar una forma segura de agregar controladores de carga en lugar de reemplazarlos.

Ben Scheirman
fuente
3
¿Por qué no poner controladores en el elemento del cuerpo? Alguna referencia? Gracias
Alexander Torstling
77
Porque es mucho más limpio separar javascript del HTML. Debería agregar un comportamiento de secuencias de comandos a elementos visuales en su HTML.
Ben Scheirman el
94

En HTML hay un autofocusatributo para todos los campos de formulario. Hay un buen tutorial sobre esto en Dive Into HTML 5 . Desafortunadamente, actualmente no es compatible con las versiones de IE menores de 10.

Para usar el atributo HTML 5 y recurrir a una opción JS:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

No se requieren controladores jQuery, onload o de eventos, porque el JS está debajo del elemento HTML.

Editar: otra ventaja es que funciona con JavaScript desactivado en algunos navegadores y puede eliminar el JavaScript cuando no desea admitir navegadores más antiguos.

Edición 2: Firefox 4 ahora es compatible con el autofocusatributo, dejando a IE sin soporte.

dave1010
fuente
3
¿Qué pasa con el autofocus="aufofocus"? Todos los enlaces que ya ha proporcionado sólo dicen que añadir el atributo: autofocus.
Gerrat
66
En los días de XHTML y HTML4, era común hacerlo attribute="value"para los atributos booleanos. HTML5 vino junto con la "sintaxis de atributo vacío" y eliminamos la redundancia. Ahora podemos hacerlo<input checked disabled autofocus data-something>
dave1010
Me gusta este enfoque ... Ese código pertenece a la entrada ... deshacerse de la entrada y el boom, el código asociado está ahí ... Nos perdemos mucho en estos días ... Dando un giro completo ahora tratando de simplificar. ..
Serge
16

Necesitas usar javascript:

<BODY onLoad="document.getElementById('myButton').focus();">

@Ben señala que no debe agregar controladores de eventos como este. Si bien esa es otra pregunta, recomienda que use esta función:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

Y luego llame a addLoadEvent en su página y haga referencia a una función que establezca el foco en el cuadro de texto deseado.

Espo
fuente
14

Simplemente escriba autofocus en el campo de texto. Esto es simple y funciona así:

 <input name="abc" autofocus></input>

Espero que esto ayude.

Arjun
fuente
1
esto es bueno, pero el problema es que, si tiene pasos con estilo deslizante, eso no sería útil especialmente si el tipo de entrada está en el paso 3 o 4 para el ex
Kobe Bryan
12

Puede hacerlo fácilmente usando jquery de esta manera:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

llamando a esta función en $(document).ready() .

Significa que esta función se ejecutará cuando el DOM esté listo.

Para obtener más información sobre la función READY, consulte: http://api.jquery.com/ready/

Amir Chatrbahr
fuente
11

Usando html y javascript simple

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

Para aquellos que usan el framework .net y asp.net 2.0 o superior, es trivial. Si está utilizando versiones anteriores del marco, necesitará escribir algunos javascript similares a los anteriores.

En su controlador OnLoad (generalmente page_load si está utilizando la plantilla de página de stock suministrada con Visual Studio) puede usar:

C#

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(* Nota: ¡eliminé el carácter de subrayado del nombre de la función que generalmente es Page_Load ya que en un bloque de código se negó a procesar correctamente! No pude ver en la documentación de marcado cómo obtener guiones bajos para renderizar sin escape).

Espero que esto ayude.

Jon
fuente
7

En mi humilde opinión, la forma 'más limpia' de seleccionar el primer campo de texto visible y habilitado en la página, es usar jQuery y hacer algo como esto:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

Espero que ayude...

Gracias...

reanimar
fuente
6 
<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>
Joel Coehoorn
fuente
5

Como consejo general, recomendaría no robar el foco de la barra de direcciones. ( Jeff ya habló de eso ) .

La carga de la página web puede demorar un tiempo, lo que significa que su cambio de enfoque puede ocurrir mucho tiempo después de que el usuario escribió la URL pae. Entonces podría haber cambiado de opinión y volver a escribir URL mientras carga su página y roba el foco para ponerla en su cuadro de texto.

Esa es la única razón que me hizo eliminar Google como mi página de inicio.

Por supuesto, si controlas la red (red local) o si el cambio de enfoque es resolver un importante problema de usabilidad, olvida todo lo que acabo de decir :)

Vincent Robert
fuente
Estoy de acuerdo contigo en algunos casos. Sin embargo, en mi caso específico, estoy desplegando un pequeño div que solo un cuadro de entrada. Se supone que el usuario debe ingresar algo y cerrar inmediatamente el div, por lo que configurar el enfoque es útil.
Mark Biek
2

Tuve un problema un poco diferente. Quería autofocus, pero quería que el placeholdertexto permaneciera, entre navegadores. Algunos navegadores ocultarían el placeholdertexto tan pronto como el campo se enfocara, algunos lo mantendrían. Tuve que hacer que los marcadores de posición permanecieran en el navegador cruzado, que tiene efectos secundarios extraños, o dejar de usarautofocus .

Así que escuché la primera tecla escrita contra la etiqueta del cuerpo y la redirigí al campo de entrada de destino. Luego, todos los controladores de eventos involucrados son asesinados para mantener las cosas limpias.

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/

Chris Moschini
fuente
0

Es posible establecer autofocuselementos de entrada

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
Oscar Castellon
fuente
-1

Si está usando ASP.NET, puede usar

yourControlName.Focus()

en el código del servidor, que agregará el JavaScript apropiado a la página.

Otros marcos del lado del servidor pueden tener un método equivalente.

Andrew Morton
fuente
-3

Usa el siguiente código. Para mi esta funcionando

jQuery("[id$='hfSpecialty_ids']").focus()
srikanth
fuente