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!


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();

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();
}

1
Trabajó para mi. La versión más simple es así: $ ('. Class input'). Focus (); $ ('. entrada de clase'). prop ('autofocus');
Raison
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.