Question

从早上开始，这是一个棘手的问题。

我有一系列的图标。单击图标时，它会加载表单。有些表格有输入[text]，其他表格有textareas。

我想要提出的是jQuery，一旦我加载了表单，我就可以运行...将注意力集中在第一个输入或textarea，无论它是什么，动态，所以我不需要if blocks

想法？

Answer 1

我认为应该这样做

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

Answer 2

这是：

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

＃form-id是表单的ID; ：input选择任何输入和textarea元素; ：enabled确保输入可编辑; ：viisble确保元素可见; ：首先是显而易见的

Answer 3

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

:input选择器会抓取所有输入，textarea，select和button元素。

Answer 4

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

假设你将你的装载加载到你知道id为......的div中。

你需要做的就是

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

加载表单后

Answer 5

修改

这实际上并不是一个很好的解决方案。 Patricia和Onkelborg的解决方案更加优雅。

var $firstInput = jQuery("input:first"); var $firstTextArea = jQuery("textarea:first"); if(firstInput.length == 0) { $firstTextArea.focus(); } else { $firstInput.focus(); }

Answer 6

它在加载事件中对我有用。

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

Answer 7

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

获取所有输入，选择和textareas
过滤掉所有按钮和隐藏字段
仅过滤启用的可见字段
选择第一个
关注所选字段

代码：

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

Answer 8

这里是由@craztmatt和其他人开发的自助模态解决方案。我已经扩展到在触发事件的模态中选择目标元素。这个捕获输入，textarea和选择元素。

// 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案例。

Answer 9

因为：visible是一个jQuery扩展而不是CSS的一部分规范，查询使用：可见无法利用本机DOM querySelectorAll（）提供的性能提升方法。使用时可获得最佳性能：可见选择元素，首先使用纯CSS选择器选择元素使用.filter（“：visible”）。

改为使用：

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

或：

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

使用.focus()

时请注意

尝试将焦点设置为隐藏元素会导致错误 IE浏览器。注意只对元素使用.focus（）可见。在没有设置的情况下运行元素的焦点事件处理程序专注于元素，使用.triggerHandler（“焦点”）代替 .focus（）。

jQuery动态关注第一个INPUT或Textarea

9 个答案: