¿Cómo establecer el foco en el primer elemento de entrada en un formulario HTML independiente del ID?

Question

¿Hay una manera simple de establecer el foco (cursor de entrada) de una página web en el primer elemento de entrada (cuadro de texto, lista desplegable, ...) al cargar la página sin tener que conocer la identificación del elemento ?

Me gustaría implementarlo como un script común para todas mis páginas/formularios de mi aplicación web.

Answer 1

También puede intentar método basado en jQuery:

$(document).ready(function() { 
    $('form:first *:input[type!=hidden]:first').focus(); 
}); 

Answer 2

Hay una escritura hasta aquí que pueden ser de utilidad: Set Focus to First Input on Web Page

Answer 3

document.forms[0].elements[0].focus(); 

Esto puede ser refinado utilizando un bucle de ejemplo. no enfoca ciertos tipos de campos, campos desactivados, etc. Mejor puede ser agregar un class = "autofocus" al campo que realmente do quiere enfocar, y recorrer los formularios [i] .elements [j] buscando ese className.

De todos modos: normalmente no es una buena idea hacer esto en cada página. Cuando enfoca una entrada, el usuario pierde la capacidad de, por ejemplo. desplaza la página desde el teclado. Si es inesperado, esto puede ser molesto, por lo que solo enfoque automáticamente cuando esté seguro de que usar el campo de formulario va a ser lo que el usuario quiera hacer. es decir. si eres Google

Answer 4

También debe omitir las entradas ocultas.

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++); 
document.forms[0].elements[i].focus(); 

Answer 5

Si está utilizando el marco de JavaScript Prototype continuación, puede utilizar el método de focusFirstElement:

Form.focusFirstElement(document.forms[0]); 

Answer 6

Poner este código al final de su etiqueta body se centrará la primera visibles no ocultos, elemento habilitado en la pantalla de forma automática. Se encargará de la mayoría de los casos que se me ocurran con poco tiempo de aviso.

<script> 
    (function(){ 
     var forms = document.forms || []; 
     for(var i = 0; i < forms.length; i++){ 
      for(var j = 0; j < forms[i].length; j++){ 
       if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){ 
        forms[i][j].focus(); 
        return; 
       } 
      } 
     } 
    })(); 
</script> 

Answer 7

La expresión más completa jQuery encontré trabajo es (a través de la ayuda de más de here)

$(document).ready(function() { 
    $('input:visible:enabled:first').focus(); 
}); 

Answer 8

Aunque este doesn' Para responder a la pregunta (que requiere una secuencia de comandos común), creo que podría ser útil para otros saber que HTML5 introduce el atributo 'autofocus':

<form> 
    <input type="text" name="username" autofocus> 
    <input type="password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

Dive in to HTML5 tiene más información.

Answer 9

Esto obtiene la primera de cualquier entrada común visible, incluyendo áreas de texto y cuadros de selección. Esto también asegura que no estén ocultos, deshabilitados o de solo lectura. también permite un div de destino, que uso en mi software (es decir, la primera entrada dentro de este formulario).

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus(); 

Answer 10

He probado muchas de las respuestas anteriores y no estaban funcionando. Encontré este en: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Gracias Kolodvor.

$("input:text:visible:first").focus(); 

Answer 11

estoy usando esto:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus(); 

Answer 12

Con AngularJS:

angular.element('#Element')[0].focus(); 

Answer 13

Esto incluye áreas de texto y botones de opción excluye

$(document).ready(function() { 
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0]; 
    if(first_input != undefined){ first_input.focus(); } 
}); 

Answer 14

Para aquellos que utilizan JSF2. 2+ y no puede pasar aut ofocus como un atributo sin valor a la misma, utilice esto:

p:autofocus="true" 

y añadirlo al espacio de nombres p (pt También se utiliza a menudo. Lo que quieras).

<html ... xmlns:p="http://java.sun.com/jsf/passthrough"> 

Answer 15

Usted debe ser capaz de utilizar clientHeight en vez de comprobar para el atributo de visualización, ya que un padre podría estar escondido este elemento:

function setFocus() { 
    var forms = document.forms || []; 
     for (var i = 0; i < forms.length; i++) { 
      for (var j = 0; j < forms[i].length; j++) { 
      var widget = forms[i][j]; 
       if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function") 
       && (typeof widget.disabled === "undefined" || widget.disabled === false) 
       && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) { 
         widget.focus(); 
         break; 
       } 
      } 
     } 
    } 
}