如何使用JQuery设置焦点在输入字段上 [英] How to Set Focus on Input Field using JQuery

问题描述

给定以下HTML结构：

 < div class =wrapper> 
< div class =top> 
< a href =http://example.comclass =link>点击此处< / a> 
< / div> 
< div class =middle> 
一些文本
< / div> 
< div class =bottom> 
< form> 
< input type =textclass =post> 
< input type =submit> 
< / form> 
< / div> 
< div> 
  

这将在页面上重复多次，我如何将焦点设置在输入字段中当用户点击 .top div中的链接时， .bottom div？

我目前正在使用下面的JQuery代码点击成功地显示 .bottom div，但似乎无法弄清楚如何设置

  $（'。link'）。click（function（）{
 $（this）.parent（）。siblings（'div.bottom'）。show（）; 
}）; 
  

谢谢！

解决方案<

  $（this）.parent（ 。）.siblings（ 'div.bottom'）发现（ i​​nput.post）聚焦（）; 
  

Given the following HTML structure:

<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>

which will be repeated several times on the page, how do I set the focus on the input field in the .bottom div when a user clicks on the link in the .top div?

I am currently making the .bottom div appear successfully on click using the JQuery code below, but can't seem to figure out how to set focus on the input field at the same time.

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

Thanks!

解决方案

Try this, to set the focus to the first input field:

$(this).parent().siblings('div.bottom').find("input.post").focus();

这篇关于如何使用JQuery设置焦点在输入字段上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！