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 .bottom
div cuando un usuario hace clic en el enlace en el .top
div?
Actualmente estoy haciendo que el .bottom
div 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!
return false;
al final de la devolución de llamada del evento. Ofunction(e) { e.preventDefault(); ..... }
? De lo contrario, su navegador simplemente navegará a esa página después de ejecutar la devolución de llamada.Respuestas:
Intente esto, para establecer el foco en el primer campo de entrada:
fuente
input
&:first
. ¿JQuery empalma eso automáticamente? Siempre pensé que debería ser asíinput:first
.input:first
podrí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 :)$(this).parent().siblings('div.bottom').find("input.post").focus();
pero.find()
es el selector que estaba buscando. Curiosamenteinput :first
niinput:first
funcionó.form
etiqueta. De todos modos, ¡me alegro de que vayas a trabajar!Si la entrada se encuentra en un cuadro de diálogo modal de arranque, la respuesta es diferente. Copiar de Cómo establecer el enfoque a la primera entrada de texto en un modal de arranque después de mostrar esto es lo que se requiere:
fuente
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!
fuente