如何使用JQuery设置焦点在输入字段上

Question

给定以下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>

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

我目前.bottom使用下面的JQuery代码使div成功点击,但似乎无法弄清楚如何同时在输入字段上设置焦点.

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

谢谢!

Answer 1

试试这个,将焦点设置为第一个输入字段:

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

Answer 2

贾斯汀的回答对我不起作用(Chromium 18,Firefox 43.0.1).jQuery .focus()创建了视觉突出显示,但文本光标没有出现在字段中(jquery 3.1.0).

受https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/的启发,我在输入字段中添加了自动聚焦属性,瞧!

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

Answer 3

如果输入恰好在引导模式对话框中，则答案是不同的。显示 以下内容后，从“ 如何设置焦点”复制到引导程序模式中的第一个文本输入：

$('#myModal').on('shown.bs.modal', function () {
  $('#textareaID').focus();
})