jQuery Centrarse dinámicamente en la primera ENTRADA o Textarea

Question

Aquí hay un truco para comenzar la mañana.

Tengo una serie de iconos. Cuando haces clic en un ícono, carga un formulario. Algunos de los formularios tienen entrada [texto] otros tienen áreas de texto.

Lo que estoy tratando de llegar a jQuery es que una vez que se carga el formulario que se puede ejecutar esa voluntad ... foco en la primera entrada o área de texto sea lo que sea, de forma dinámica, así que no necesito si bloques.

Ideas?

Answer 1

Esto debe hacerlo creo

$("#formId input:text, #formId textarea").first().focus(); 

Answer 2

EDITAR

Esto no es realmente tan grande de una solución. Las soluciones de Patricia y Onkelborg a continuación son mucho más elegantes.

var $firstInput = jQuery("input:first"); 
var $firstTextArea = jQuery("textarea:first"); 

if(firstInput.length == 0) { 
    $firstTextArea.focus(); 
} 

else { 
    $firstInput.focus(); 
} 

Answer 3

algunos de su código sería bueno .. pero esto debería ser fácil.

asumiendo que su carga para su en un div que conoce la identificación de ....

todo lo que tiene que hacer es algo así como

$('#TheIdOfYourFormDiv').find('input, textarea').first().focus() 

después de haber cargado el formulario

Answer 4

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

El selector :input toma todos los elementos de entrada, texto, selección y botón.

Answer 5

Aquí está:

$('#form-id :input:enabled:visible:first').focus(); 

# forma-id es el ID de la forma; : la entrada selecciona cualquier elemento de entrada y de área de texto; : enabled garantiza que la entrada sea editable; : viisble asegura que el elemento sea visible; : el primero es obvio

Answer 6

Me funciona en el caso de la carga.

$('#Div').find('input:first').focus(); 

Answer 7

Porque: visible es una extensión de jQuery y no forma parte de la especificación CSS , consultas usando: visible no puede aprovechar el impulso rendimiento proporcionado por el método nativo DOM querySelectorAll() . Para lograr el mejor rendimiento al usar: visible para seleccionar elementos , primero seleccione los elementos usando un selector de CSS puro, luego use .filter (": visible").

usar en su lugar:

$('form').filter(':input:first').focus(); 

o:

$('input').first().focus(); //as shown in the "correct" answer. 

También hay que tener en cuenta al utilizar .focus()

El intento de establecer el foco en un elemento oculto provoca un error en Internet Explorer. Tenga cuidado de utilizar .focus() solo en elementos que sean visibles . Para ejecutar los controladores de eventos de foco de un elemento sin establecer centrarse en el elemento, utilice .triggerHandler ("foco") en lugar de .focus().

Answer 8

Aquí está mi solución. El código debe ser bastante fácil de seguir, pero aquí es la idea:

• obtener todas las entradas, selecciona y áreas de texto
• filtrar todos los botones y campos ocultos
• filtro sólo está habilitado, los campos visibles
• seleccione la primera
• enfoque del campo seleccionado

el código:

function focusFirst(parent) { 
    $(parent).find('input, textarea, select') 
     .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button') 
     .filter(':enabled:visible:first') 
     .focus(); 
} 

Luego simplemente llame a focusFirst con su elemento principal o selector.

Selector:

focusFirst('#parentId'); 

Elemento:

var el = $('#parentId'); 
focusFirst(el); 

Answer 9

Aquí hay una solución para los modales de arranque desarrollados por encima de eso por @craztmatt y otros. Me he extendido para que la selección del elemento objetivo comience en el modal que desencadenó el evento. Este captura entradas, textarea Y elementos seleccionados.

// do this to make bootstrap modals auto-focus. 
// delegate to body so that we only have to set it up once. 
$('body').on('shown.bs.modal', function (e) { 
    var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal 
    if (ele) {ele.focus();} // if we found one then set focus. 
}) 

No es precisamente la pregunta del OP sino que debe ser adaptable a un caso jQuery pura también.