早上好，这是一个棘手的问题。
我有一系列的图标。当你点击一个图标时，它会加载一个表单。有些表单有输入 [text] ，其他的则有文本区域 [textarea] 。
我试图想出一种jQuery方法，一旦加载表单，可以让它自动聚焦在第一个输入框或文本区域上，而不需要使用 if 语句块进行判断。
有什么想法吗？
10个回答
75
我认为这应该可以解决问题
$("#formId input:text, #formId textarea").first().focus();
- Onkelborg
6
@user485680：如果您能接受这个答案，我会非常感激 :) - Onkelborg
如果您不想指定一个ID，并希望在所有具有表单的页面上系统范围内工作，该怎么办？ - ctilley79
只需删除“#formId”即可。 - Onkelborg
尝试使用
$('input:visible:first').focus();。 - KingRider2Viliam的回答更好。 - James Westgate
这段代码对我很有用：
$('form').find('input:visible:enabled, select:visible:enabled, textarea:visible:enabled').first().focus(); - M.J.Ahmadi52
这就是它:
$('#form-id :input:enabled:visible:first').focus();
#form-id 是表单的ID； :input 选择任何输入和文本区域元素； :enabled 确保输入可编辑； :visible 确保元素可见； :first 很显然。
- Viliam
1
1甚至更好的是，对于每个表单都这样做，如果您不希望页面底部的提交按钮获得焦点（页面滚动到一半）：$('form :input:enabled:visible:first').not(':input[type=button], :input[type=submit], :input[type=reset]').focus(); - RWC
11
可以提供一些你的代码……但这应该很容易。
假设你将表单加载到一个已知id的div中...
你需要做的只是类似这样：
$('#TheIdOfYourFormDiv').find('input, textarea').first().focus()
在你加载了表单之后
- Patricia
3
这再次展示了jQuery的强大之处。
dothis.dothat.thendothis 我喜欢它！ - Justus Romijn好的解决方案。但是如果你的第一个输入元素是一个隐藏的输入字段，你应该使用：$('#TheIdOfYourFormDiv').find('input:text, textarea').first().focus() - Dirk
一个好的观察，我们可能也想在其中包括数字。 - Patricia
11
$(":input:first").focus();
:input 选择器可以获取所有的input、textarea、select和button元素。
- Tom Brothers
1
它还选择了一个隐藏的输入元素，如果您的第一个元素是隐藏的，则该元素将无法使用。 - Velja Radenkovic
4
编辑
实际上这并不是一个很好的解决方案。下面 Patricia 和 Onkelborg 提供的解决方案更加优雅。
var $firstInput = jQuery("input:first");
var $firstTextArea = jQuery("textarea:first");
if(firstInput.length == 0) {
$firstTextArea.focus();
}
else {
$firstInput.focus();
}
- Vivin Paliath
2
不起作用。可能是因为我正在使用AJAX将表单注入页面吗？ - TheExit
@user485680：不，AJAX与此无关。您是否已将“formId”替换为表单的ID？ - Onkelborg
1
这是一个基于@craztmatt和其他人开发的Bootstrap模态框解决方案。我扩展了它，使得目标元素的选择从触发事件的模态框开始。这个解决方案可以捕获输入、文本区域和下拉菜单元素。
// 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.
})
虽然这不是楼主的问题，但也适用于纯jquery情况。
- Vanquished Wombat
1
这是我的解决方案。代码应该很容易理解，但这是思路：
- 获取所有输入框、选择框和文本区域
- 过滤掉所有按钮和隐藏字段
- 仅保留启用且可见的字段
- 选择第一个字段
- 将焦点放在所选字段上
代码：
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);
- J Adam Rogers
1
在加载事件中对我起作用。
$('#Div').find('input:first').focus();
- Nalan Madheswaran
0
在寻找快速解决方案以选择第一个空值输入时，发现了这个问题。
想出了以下方法，希望能帮到某些人。
想出了以下方法，希望能帮到某些人。
$(':input[value=""]:enabled:visible:first').focus();
- atoms
0
因为 :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()时要注意
尝试将焦点设置到隐藏元素会导致Internet Explorer出错。请注意仅在可见元素上使用
.focus()。如果要运行元素的焦点事件处理程序而不设置焦点到该元素，请改用.triggerHandler("focus")而不是.focus()。
- darcher
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接