jQuery动态地关注第一个输入或文本区域

这里有一个棘手的问题来开始今天的早晨

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

我想提出的是jQuery，一旦我加载表单，我就可以运行它，它将。。。关注第一个输入或文本区域，不管它是什么，动态地，所以我不需要if块

想法？

编辑

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

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

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

else {
  $firstInput.focus();
}

---

我想这应该可以

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

---

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

假设您将for加载到一个div中，并且您知道的id是

你所要做的就是

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

在加载表单之后

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

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

这里是：

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

// 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.
})

表单id是表单的id； ：输入选择任何输入和文本区域元素； ：启用确保输入可编辑； ：viisble确保元素可见；

---

：首先很明显，它在加载事件中对我有效

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

因为：visible是jQuery扩展，而不是CSS的一部分 规范，使用：visible的查询不能利用 本机DOM querySelectorAll提供的性能提升 方法使用时实现最佳性能：选择可见 元素，首先使用纯CSS选择器选择元素，然后 使用。过滤器：可见

改用：

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

或：

使用时也要记住。集中注意力

试图将焦点设置为隐藏元素会导致中出现错误 Internet Explorer。注意只使用。关注那些 看得见的运行元素的焦点事件处理程序而不设置 对于元素，使用.triggerHandler焦点而不是 .集中注意力

---

这是我的解决办法。代码应该很容易理解，但这里有一个想法：

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

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

---

这里有一个由@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情况。

hmm不起作用。可能是因为我正在使用AJAX将表单注入页面吗？@user485680:不，AJAX与此无关。您是否已将formId替换为表单的id？能否发布加载新表单的代码？@user485680:如果您接受此答案，我将不胜感激：如果您不想指定id并在所有表单页面上使用此工作系统，该怎么办？只需删除formId，您也会很好$'input:visible:first'。聚焦；下面Viliam给出的答案更好。这也是jQuery的强大之处。多此一举，多此一举，我爱死它了！很好的解决方案。但是如果您的第一个输入元素是一个隐藏的输入字段。您应该改为使用：$'TheIdOfYourFormDiv'。查找'input:text，textarea'。first.Focus很好的观察，我们可能还想在其中包含数字。它还选择了一个隐藏的输入元素，如果您的第一个元素被隐藏，它将无法使用。或者更好，对每个表单执行此操作，如果您不希望页面底部的“提交”按钮成为焦点，则页面将滚动到一半：$“表单：输入：启用：可见：第一”。不：输入[类型=按钮]，：输入[类型=提交]，：输入[类型=重置]。焦点；