Cómo establecer el enfoque en el campo de entrada usando JQuery

106

Dada la siguiente estructura HTML:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

que se repetirá varias veces en la página, ¿cómo establezco el foco en el campo de entrada en el .bottomdiv cuando un usuario hace clic en el enlace en el .topdiv?

Actualmente estoy haciendo que el .bottomdiv aparezca con éxito al hacer clic usando el código JQuery a continuación, pero parece que no puedo averiguar cómo establecer el enfoque en el campo de entrada al mismo tiempo.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

¡Gracias!

Piedra rodante
fuente
Tu pregunta ha sido respondida, pero también: supongo que también estás ejecutando return false;al final de la devolución de llamada del evento. O function(e) { e.preventDefault(); ..... }? De lo contrario, su navegador simplemente navegará a esa página después de ejecutar la devolución de llamada.
simshaun
@simshaun, ¿navegar a qué página?
Rolling Stone
Bueno, en su ejemplo, cuando haga clic en ese enlace, irá a example.com .
simshaun
oh, así es, ¡gracias por avisar!
Rolling Stone

Respuestas:

135

Intente esto, para establecer el foco en el primer campo de entrada:

$(this).parent().siblings('div.bottom').find("input.post").focus();
Justin Ethier
fuente
1
Espacio entre input& :first. ¿JQuery empalma eso automáticamente? Siempre pensé que debería ser así input:first.
simshaun
Sí, puedes escribirlo de cualquier forma. Supongo que input:firstpodría ser la forma más formal de escribirlo, aunque parece más fácil de leer al revés. Pero tal vez sea solo yo :)
Justin Ethier
Supongo que debido a que estoy tan acostumbrado, cuando veo el espacio, automáticamente pienso en "elemento hijo" y me toma un segundo desconfundirme. Pero bueno, soy solo yo. Es genial que funcione de cualquier manera.
simshaun
@justin en realidad tuve que modificarlo un poco para que funcionara: $(this).parent().siblings('div.bottom').find("input.post").focus();pero .find()es el selector que estaba buscando. Curiosamente input :firstni input:firstfuncionó.
Rolling Stone
Interesante, probablemente porque la entrada está dentro de una formetiqueta. De todos modos, ¡me alegro de que vayas a trabajar!
Justin Ethier
7

La respuesta de Justin no me funcionó (Chromium 18, Firefox 43.0.1). jQuery's .focus()crea un resaltado visual, pero el cursor de texto no aparece en el campo (jquery 3.1.0).

Inspirado por https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , agregué el atributo de enfoque automático al campo de entrada y ¡listo!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}
MKaama
fuente
1
Trabajó para mi. La versión más simple es así: $ ('. Class input'). Focus (); $ ('. entrada de clase'). prop ('autofocus');
Raison