jQuery 动态聚焦于第一个 INPUT 或 Textarea

Question

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

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

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

有想法吗？

Answer 1

我认为这应该可以

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

Answer 2

这里是：

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

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

Answer 3

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

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

您所要做的就是

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

加载表单之后

Answer 4

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

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

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

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

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

代码：

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

// 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 的一部分
规范，使用 :visible 的查询不能利用
原生 DOM querySelectorAll() 提供的性能提升
方法。使用 :visible 进行选择时获得最佳性能
elements，首先使用纯 CSS 选择器选择元素，然后
使用 .filter(":visible")。

使用：

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

或：

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

使用 .focus() 时还要记住

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

Answer 10

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

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

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