Enfocando el primer control en el formulario usando jquery

Question

Usando jquery ¿cómo enfoco el primer elemento (campo de edición, área de texto, campo desplegable, etc.) en el formulario cuando la página carga?

Algo así como:

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

pero utilizando jQuery.

Otro requisito, no se centra el primer elemento cuando el formulario tiene clase = "filtro".

Answer 1

Para el fondo utilicé el script en ruby ​​on rails app. Después de probar todo su respuesta y descubrió que todos no funciona, Con una búsqueda en Google me encontré con este fragmento que obras:

$(function() { 
    $("form:not(.filter) :input:visible:enabled:first").focus(); 
}); 

Se resultan $('form :input:first') coincida con la entrada oculta que Rieles inserta en todos los formularios.

Answer 2

$('form:not(.filter) :input:visible:enabled:first').focus() 

Esto seleccionará el primer elemento de entrada visible (<input />, <select>, <textarea>) que no tiene la clase filter en ella.

Answer 3

Me gusta marcar mi elemento elegido con una clase y seleccionar por clase en lugar de dejarlo en el orden de los elementos en la página. Me parece mucho más fácil que tratar de recordar a actualizar mi "¿cuál es el primer elemento real" algoritmo de la hora de seleccionar los elementos que pueden o no pueden estar ocultos, pueden o no ser inyectado por el marco, ...

$(document).ready(function() { 
    $('input.js-initial-focus:first').focus(); // choose first just in case 
    }); 

Answer 4

Esta no es una solución de una línea, pero toma en consideración del primer campo de entrada del usuario verdadero (puede ser < de entrada/> o <seleccionar> tag).

Solo tienes que ajustar esto un poco más y obtienes lo que necesitas.

P.S: He probado que este código funciona en FireFox, Chrome e IE6.

function focusFirstFormField() { 
    try { 
     var selector = $("#formid"); 
     if (selector.length >= 1 && selector[0] && selector[0].elements && selector[0].elements.length > 0) { 
      var elements = selector[0].elements; 
      var length = elements.length; 
      for (var i = 0; i < length; i++) { 
       var elem = elements[i]; 
       var type = elem.type; 

       // ignore images, hidden fields, buttons, and submit-buttons 
       if (elem.style.display != "none" /* check for visible */ && type != "image" && type != "hidden" && type != "button" && type != "submit") { 
        elem.focus(); 
        break; 
       } 
      } 
     } 
    } 
    catch(err) { /* ignore error if any */ } 
} 

Answer 5

he tenido algunos problemas con los cuadros de diálogo jQuery que eran invisibles en la página, pero todavía fueron seleccionados por el selector:

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

Después de un montón de jugar un rato, finalmente se me ocurrió una solución que excluye toda . entradas en divs con una clase de .dialog mediante la adición de un" .no() en el extremo Esto puede ser útil a alguien más Este es mi selectora:.

$(":text:visible:enabled:first").not("div .dialog input").focus(); 

Answer 6

$("form").find('input[type=text],textarea,select').filter(':visible:first').focus();