如何使用JQuery设置对输入字段的关注


106

给定以下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();
});

谢谢!


您的问题已得到回答,但是:我假设您还在return false;事件回调的末尾执行?还是function(e) { e.preventDefault(); ..... }?如果不是,您的浏览器将在执行回调后直接导航至该页面。
simshaun 2011年

@simshaun导航到哪个页面?
滚石

好吧,在您的示例中,当您单击该链接时,它将转到example.com
simshaun 2011年

哦,是的,谢谢大家的注意!
滚石

Answers:


135

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

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

1
input&之间的空格:first。jQuery是否会自动拼接?我一直认为应该这样input:first
simshaun 2011年

是的,您可以用任何一种方式编写它。我想这input:first也许是一种更正式的编写方式,尽管用另一种方式似乎更容易阅读。也许就是我:)
贾斯汀·埃斯蒂尔

我猜是因为我已经习惯了,当我看到这个空间时,我会自动认为“子元素”,并且花了一秒钟的时间使自己困惑。但是,嘿,就是我。无论哪种方式都很酷。
simshaun 2011年

@justin我实际上不得不对其进行一些微调以使其起作用:$(this).parent().siblings('div.bottom').find("input.post").focus();但这.find()是我一直在寻找的选择器。有趣的是input :first也没有input:first工作。
滚石

有趣的原因,可能是因为输入位于form标签内。无论如何,很高兴您能上班!
贾斯汀·埃斯蒂尔


7

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

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

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
为我工作。更简单的版本是这样的:$('。class input')。focus(); $('。class input')。prop('autofocus');
Raison
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.