jQuery 动态聚焦第一个 INPUT 或 Textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4026091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Dynamically focus on the first INPUT or Textarea
提问by TheExit
Here's a tricky one to start the morning.
这是一个棘手的早晨。
I have a series of icons. When you click an icon it loads a form. Some of the forms have input[text] others have textareas.
我有一系列图标。当您单击一个图标时，它会加载一个表单。一些表单有 input[text] 其他有 textareas。
What I'm trying to come up with is jQuery that once I load the form I can run that will... Focus in on the first input or textarea whatever it may be, dynamically so I don't need if blocks.
我试图想出的是 jQuery，一旦我加载了表单，我就可以运行它......专注于第一个输入或文本区域，无论它可能是什么，动态地，所以我不需要 if 块。
Ideas?
想法？
回答by Onkelborg
This should do it I think
我认为应该这样做
$("#formId input:text, #formId textarea").first().focus();
回答by Viliam
Here it is:
这里是：
$('#form-id :input:enabled:visible:first').focus();
#form-id is ID of the form; :input selects any input and textarea element; :enabled ensures the input is editable; :viisble ensures that the element is visible; :first is obvious
#form-id 是表单的ID；:input 选择任何 input 和 textarea 元素；:enabled 确保输入是可编辑的；:viisble 确保元素可见；: 首先是显而易见的
回答by Tom Brothers
$(":input:first").focus();
The :inputselector grabs all input, textarea, select and button elements.
该:input选择器抓住所有的输入，文本区域，选择和按钮元件。
回答by Patricia
some of your code would be nice.. but this should be easy.
你的一些代码会很好..但这应该很容易。
assuming your loading your for into a div that you know the id of....
假设您将 for 加载到您知道...的 id 的 div 中。
all you have to do is something like
你所要做的就是
$('#TheIdOfYourFormDiv').find('input, textarea').first().focus()
after you've loaded your form
加载表单后
回答by Vivin Paliath
EDIT
编辑
This is actually not that great of a solution. Patricia's and Onkelborg's solutions below are much more elegant.
这实际上并不是一个很好的解决方案。下面的 Patricia 和 Onkelborg 的解决方案要优雅得多。
var $firstInput = jQuery("input:first");
var $firstTextArea = jQuery("textarea:first");
if(firstInput.length == 0) {
$firstTextArea.focus();
}
else {
$firstInput.focus();
}
回答by Nalan Madheswaran
It's working for me in the load event.
它在加载事件中对我有用。
$('#Div').find('input:first').focus();
回答by J Adam Rogers
Here is my solution. The code should be easy enough to follow but here is the idea:
这是我的解决方案。代码应该很容易理解，但这里的想法是：
- get all inputs, selects, and textareas
- filter out all buttons and hidden fields
- filter to only enabled, visible fields
- select the first one
- focus the selected field
- 获取所有输入、选择和文本区域
- 过滤掉所有按钮和隐藏字段
- 过滤到仅启用的可见字段
- 选择第一个
- 聚焦所选字段
The code:
编码：
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();
}
Then simply call focusFirst with your parent element or selector.
然后只需使用您的父元素或选择器调用 focusFirst。
Selector:
选择器：
focusFirst('#parentId');
Element:
元素：
var el = $('#parentId');
focusFirst(el);
回答by Vanquished Wombat
Here's A solution for bootstrap modals developed on top of that by @craztmatt and others. I have extended to have the selection of the target element start at the modal that triggered the event. This one catches inputs, textarea AND select elements.
这是由@craztmatt 和其他人在此基础上开发的引导模式解决方案。我已经扩展到从触发事件的模式开始选择目标元素。这个捕获输入、textarea 和 select 元素。
// 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.
})
Not precisely the OP's question but should be adaptable to a pure jquery case too.
不完全是 OP 的问题，但也应该适用于纯 jquery 案例。
回答by darcher
Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").
因为 :visible 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :visible 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :visible 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":visible")。
Use instead:
改用：
$('form').filter(':input:first').focus();
or:
或者：
$('input').first().focus(); //as shown in the "correct" answer.
Also bear in mind when using .focus()
使用时也要注意 .focus()
Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .focus() on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .focus().
尝试将焦点设置到隐藏元素会导致 Internet Explorer 出错。注意只在可见元素上使用 .focus() 。要在不为元素设置焦点的情况下运行元素的焦点事件处理程序，请使用 .triggerHandler("focus") 而不是 .focus()。
