jQuery 动态关注第一个 INPUT 或 Textarea答案

【问题标题】：jQuery Dynamically focus on the first INPUT or TextareajQuery 动态关注第一个 INPUT 或 Textarea
【发布时间】：2011-04-30 21:04:32
【问题描述】：

这是一个棘手的早晨开始。

我有一系列图标。当您单击一个图标时，它会加载一个表单。一些表单有输入[文本]其他有文本区域。

我试图想出的是 jQuery，一旦我加载了我可以运行的表单，它将...专注于第一个输入或文本区域，无论它可能是动态的，所以我不需要 if 块.

想法？

【问题讨论】：

您可以发布加载新表单的代码吗？

标签： jquery jquery-selectors

【解决方案1】：

我认为应该这样做

$("#formId input:text, #formId textarea").first().focus();

【讨论】：

@user485680：如果您接受这个答案，我将不胜感激 :)
如果您不想指定 id 并且在所有带有表单的页面上都在系统范围内使用此工作怎么办？
删除 #formId" 就可以了
也试试$('input:visible:first').focus();
Viliam 下面的回答更好。

【解决方案2】：

这里是：

$('#form-id :input:enabled:visible:first').focus();

#form-id 是表单的ID； :input 选择任何输入和文本区域元素； :enabled 确保输入是可编辑的； :visble 确保元素可见； :first 很明显

【讨论】：

或者更好的是，对每个表单都这样做，如果您不希望页面底部的提交按钮被聚焦（页面滚动到一半）： $('form :input :enabled:visible:first').not(':input[type=button], :input[type=submit], :input[type=reset]').focus();

【解决方案3】：

你的一些代码会很好..但这应该很容易。

假设您将 for 加载到您知道...的 id 的 div 中

你所要做的就是像

$('#TheIdOfYourFormDiv').find('input, textarea').first().focus()

加载表单后

【讨论】：

这又是 jQuery 的强大之处。 dothis.dothat.thendothis我喜欢！
很好的解决方案。但是，如果您的第一个输入元素是隐藏的输入字段。您应该改用： $('#TheIdOfYourFormDiv').find('input:text, textarea').first().focus()
一个很好的观察，我们可能也想在其中包含数字。

【解决方案4】：

$(":input:first").focus();

:input 选择器抓取所有输入、文本区域、选择和按钮元素。

【讨论】：

它还会选择一个隐藏的输入元素，如果你的第一个元素被隐藏，它就无法使用。

【解决方案5】：

编辑

这实际上并不是一个很好的解决方案。下面 Patricia 和 Onkelborg 的解决方案要优雅得多。

var $firstInput = jQuery("input:first");
var $firstTextArea = jQuery("textarea:first");

if(firstInput.length == 0) {
  $firstTextArea.focus();
}

else {
  $firstInput.focus();
}

【讨论】：

嗯不工作。可能是因为我使用 AJAX 将表单注入到页面中？
@user485680：不，AJAX 与它无关。您是否将“formId”替换为表单的 id？

【解决方案6】：

它在加载事件中为我工作。

$('#Div').find('input:first').focus();

【讨论】：

【解决方案7】：

这是我的解决方案。代码应该很容易理解，但这里的想法是：

获取所有输入、选择和文本区域
过滤掉所有按钮和隐藏字段
过滤到仅启用的可见字段
选择第一个
聚焦所选字段

代码：

function focusFirst(parent) {
    $(parent).find('input, textarea, select')
        .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button')
        .filter(':enabled:visible:first')
        .focus();
}

然后只需使用您的父元素或选择器调用 focusFirst。

选择器：

focusFirst('#parentId');

元素：

var el = $('#parentId');
focusFirst(el);

【讨论】：

【解决方案8】：

这是@craztmatt 和其他人在此基础上开发的引导模式的解决方案。我已经扩展为从触发事件的模式开始选择目标元素。这个捕获输入、文本区域和选择元素。

// do this to make bootstrap modals auto-focus.
// delegate to body so that we only have to set it up once.
$('body').on('shown.bs.modal', function (e) {
    var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal
    if (ele) {ele.focus();} // if we found one then set focus.
})

不完全是 OP 的问题，但也应该适用于纯 jquery 案例。

【讨论】：

【解决方案9】：

因为 :visible 是一个 jQuery 扩展，而不是 CSS 的一部分规范，使用 :visible 的查询不能利用本机 DOM querySelectorAll() 提供的性能提升方法。使用 :visible 来选择时达到最佳性能元素，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":visible")。

改用：

$('form').filter(':input:first').focus();

或：

$('input').first().focus(); //as shown in the "correct" answer.

使用.focus()时也要记住

尝试将焦点设置到隐藏元素会导致错误 IE浏览器。注意只在元素上使用 .focus() 可见的。在不设置的情况下运行元素的焦点事件处理程序聚焦到元素，使用 .triggerHandler("focus") 而不是 .focus()。

【讨论】：

【解决方案10】：

在寻找快速解决方案以选择具有空白值的第一个输入时发现此问题。

想出了以下内容，希望对某人有所帮助

$(':input[value=""]:enabled:visible:first').focus();

【讨论】：