早上好,这是一个棘手的问题。
我有一系列的图标。当你点击一个图标时,它会加载一个表单。有些表单有输入 [text] ,其他的则有文本区域 [textarea] 。
我试图想出一种jQuery方法,一旦加载表单,可以让它自动聚焦在第一个输入框或文本区域上,而不需要使用 if 语句块进行判断。
有什么想法吗?
早上好,这是一个棘手的问题。
我有一系列的图标。当你点击一个图标时,它会加载一个表单。有些表单有输入 [text] ,其他的则有文本区域 [textarea] 。
我试图想出一种jQuery方法,一旦加载表单,可以让它自动聚焦在第一个输入框或文本区域上,而不需要使用 if 语句块进行判断。
有什么想法吗?
我认为这应该可以解决问题
$("#formId input:text, #formId textarea").first().focus();
$('input:visible:first').focus();
。 - KingRider$('form').find('input:visible:enabled, select:visible:enabled, textarea:visible:enabled').first().focus();
- M.J.Ahmadi这就是它:
$('#form-id :input:enabled:visible:first').focus();
#form-id 是表单的ID; :input 选择任何输入和文本区域元素; :enabled 确保输入可编辑; :visible 确保元素可见; :first 很显然。
可以提供一些你的代码……但这应该很容易。
假设你将表单加载到一个已知id的div中...
你需要做的只是类似这样:
$('#TheIdOfYourFormDiv').find('input, textarea').first().focus()
在你加载了表单之后
dothis.dothat.thendothis
我喜欢它! - Justus Romijn$(":input:first").focus();
:input
选择器可以获取所有的input、textarea、select和button元素。
编辑
实际上这并不是一个很好的解决方案。下面 Patricia 和 Onkelborg 提供的解决方案更加优雅。
var $firstInput = jQuery("input:first");
var $firstTextArea = jQuery("textarea:first");
if(firstInput.length == 0) {
$firstTextArea.focus();
}
else {
$firstInput.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.
})
虽然这不是楼主的问题,但也适用于纯jquery情况。
这是我的解决方案。代码应该很容易理解,但这是思路:
代码:
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);
在加载事件中对我起作用。
$('#Div').find('input:first').focus();
$(':input[value=""]:enabled:visible:first').focus();
请改用:
$('form').filter(':input:first').focus();
或者:
$('input').first().focus(); //as shown in the "correct" answer.
在使用.focus()
时要注意
尝试将焦点设置到隐藏元素会导致Internet Explorer出错。请注意仅在可见元素上使用
.focus()
。如果要运行元素的焦点事件处理程序而不设置焦点到该元素,请改用.triggerHandler("focus")
而不是.focus()
。