jQuery: ¿cómo encontrar la primera entrada visible / seleccionar / área de texto excluyendo botones?

87

Lo intenté

$(":input:not(input[type=button],input[type=submit],button):visible:first")

pero no encuentra nada.

Cual es mi error

UPD: ejecuto esto en $ (documento) .load ()

<script type="text/javascript">
$(window).load(function () {
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

y en la depuración puedo ver que firstInput está vacío.

UPD2: Estoy en la página ASP.NET que se ejecuta en Sharepoint.

Hasta ahora he descubierto que para algunos elementos los encuentra (para los fijos) y para otros no. :(

jquery input jquery-selectors Artem
fuente
Pruebe "input" en lugar de ": input"?
Alec
Debería funcionar bien. Tu problema está en otra parte. ¿No te la ejecución de este antes de la $(document)es ready()?
BalusC
¿Tiene un html específico para buscar?
Shiki
¿Quizás la primera entrada sea de type="hidden"? Haga clic con el botón derecho en la página y vea la fuente. El HTML generado también es importante. Sin él y sin un SSCCE adecuado , se dispara en la oscuridad.
BalusC

Respuestas:

166

¿Por qué no apuntar a los que desea ( demostración )?

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

Editar

O use jQuery : selector de entrada para filtrar los descendientes de formularios.

$('form').find('*').filter(':input:visible:first');
Pajeño
fuente
5
¿Caja? ¿Radio? ¿Contraseña? Sin mencionar la gran cantidad de nuevos tipos de entrada HTML5.
BalusC
9
@BalusC $ ('formulario'). Find (': input'). Filter (': visible: first')
Abe Petrillo
1
Si bien esto funciona hasta cierto punto, ignora el atributo tabindex.
Eoleary
2
Pequeño detalle, pero útil adición: en lugar de ': visible: first', ': visible: enabled: first' será un filtro mucho mejor porque el elemento superior podría deshabilitarse en algunos casos y el enfoque no puede desplazarse allí.
Prahlad Yeri
1
@PrahladYeri Quizás también excluya readonly':input:visible:enabled:not([readonly]):first'
JustinStolle
13

El código de JQuery está bien. Debe ejecutar en el controlador listo, no en el evento de carga de la ventana.

<script type="text/javascript">
$(function(){
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

Actualizar

Probé con el ejemplo de Karim79 (gracias por el ejemplo) y funciona bien: http://jsfiddle.net/2sMfU/

PeterDeColonia
fuente
3
Gracias @BalusC. Voy a dispararme ahora. Me odio a mí mismo. Podría haber pasado la última hora sin jugar con el código de trabajo. Podría haber alimentado a mis perros, limpiar mi cocina. Hay muchas cosas que podría haber logrado. Ahora todo lo que tengo es dolor. Adiós, para siempre ... Y sí, debí haber escuchado.
karim79
@karim: rofl. De nada :) Por cierto: ya bañé a mis hijos, los traje a la cama, di de comer a los perros y gatos y me tomé una coca cola;)
BalusC
7

Este es mi resumen de lo anterior y funciona perfectamente para mí. Gracias por la info!

<script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) {
            firstInput.focus();
        }
    });
</script>
Ben Foster
fuente
3

Esta es una mejora con respecto a la respuesta de @ Mottie porque a partir de jQuery 1.5.2 :textselecciona inputelementos que no tienen un typeatributo especificado (en cuyo caso type="text"está implícito):

$('form').find(':text,textarea,select').filter(':visible:first')
Mike Slinn
fuente
1

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

  • obtener todas las entradas, selecciones y áreas de texto
  • filtrar todos los botones y campos ocultos
  • filtrar solo para campos visibles habilitados
  • selecciona el primero
  • enfocar el 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('form#aspnetForm');

Elemento:

var el = $('form#aspnetForm');
focusFirst(el);
J Adam Rogers
fuente
0

Puede probar el siguiente código ...

$(document).ready(function(){
    $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>
Expandir fragmento

Mahbub
fuente