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

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

当用户单击 .top div 中的链接时，如何将焦点设置在 .bottom div 中的输入字段上？

我目前正在使用下面的 JQuery 代码使 .bottom div 成功地在单击时显示，但似乎不知道如何同时将焦点集中在输入字段上。

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

Thanks!

320617 次浏览
小开
最佳答案

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

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

Justin 的回答对我不起作用(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();
}
小开

如果输入恰好在引导模式对话框中，那么答案就不同了。从 如何设置焦点，以第一个文本输入引导模式后显示进行复制需要:

$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
小开 
//$GLOBALS['sitename'] is our domain site URL
//$_GET['s'] is the search parameter of our search, and we want to highlight that term searched...
jQuery(document).ready(function($){
let loc=location.href;
switch(loc)
{


case "<?php echo $GLOBALS['sitename'] ?>?s=<?php echo $_GET['s'] ?>":
{
let searchf= $("form.search-form").find("input[type='search']:first");
//searchf.val('').focus();
//empty the value to allow a new search and focus on the field....this works but better to highlight the searched term to allow the user to decide if want to type in something else or just hit again search. In case we want to empty the searched term
setTimeout(function (){
searchf.delay(1000).focus().select();
}, 1000);
break;
//.... end of relevant code
}

提交答案