javascript 如何将焦点设置为表单中的第一个可编辑输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8023502/
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
how to set focus to first editable input element in form
提问by Andrus
Dynamically created form contains input elements. First elements may be disabled or readonly. I tired code below to set focus to first elemnt which accepts data to enable fast data enttry form keyboard. However if form fist element is disable or readonly, focus is not set. How to set focus to first element which accepts data ?
动态创建的表单包含输入元素。第一个元素可能被禁用或只读。我累了下面的代码将焦点设置为第一个元素，它接受数据以启用快速数据输入表单键盘。但是，如果表单拳头元素被禁用或只读，则不会设置焦点。如何将焦点设置为接受数据的第一个元素？
<form style='margin: 30px' id="Form" class='form-fields' method='post' target='_blank'
action='Report/Render'>
...
<input id='_submit' type='submit' value='Show report' class='button blue bigrounded' />
</form>
<script type="text/javascript">
$(function () {
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea');
elements[0].focus();
elements[0].select();
});
</script>
Update
更新
There are also hidden input fields, sorry. Answers provided set focus to hidden element. Answr containing function does not find any element.ˇ
还有隐藏的输入字段，抱歉。提供的答案将焦点设置为隐藏元素。包含函数的答案找不到任何元素。ˇ
Here is the update testcase:
这是更新测试用例：
$(function () {
$("#form :input:not([readonly='readonly']):not([disabled='disabled'])").first()
.focus();
});
How to set focus to vist visible, enabled and not readonly element ?
如何将焦点设置为可见、启用和非只读元素？
Update 3
更新 3
I tried Row W code where input element was added. Now it sets focus to second element. Testcase is shown at Revision 5 of Rob W's answer
我尝试了添加输入元素的 Row W 代码。现在它将焦点设置为第二个元素。测试用例显示在Rob W 答案的第 5 版中
采纳答案by Rob W
Use the following code:
使用以下代码：
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea').filter(function(){
return !this.readOnly &&
!this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none";
});
elements.focus().select();
If you only want to select the first element, the following code is more efficient:
如果只想选择第一个元素，下面的代码效率更高：
$('#Form').find(':text,:radio,:checkbox,select,textarea').each(function(){
if(!this.readOnly && !this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none") {
this.focus(); //Dom method
this.select(); //Dom method
return false;
}
});
Update: if you want to have the elements in the same order, use:
更新：如果您希望元素的顺序相同，请使用：
var elements = $("#form").find("*").filter(function(){
if(/^select|textarea|input$/i.test(this.tagName)) { //not-null
//Optionally, filter the same elements as above
if(/^input$/i.test(this.tagName) && !/^checkbox|radio|text$/i.test(this.type)){
// Not the right input element
return false;
}
return !this.readOnly &&
!this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none";
}
return false;
});
回答by James Hill
Use jQuery's :not()selector:
使用 jQuery 的:not()选择器：
$("#myForm :input:not([readonly='readonly']):not([disabled='disabled']):reallyvisible").first()
.focus();
Here's a working fiddle.
这是一个工作小提琴。
EDIT:
编辑：
To meet the new requirement you posted in the comments, you'll have to extend the :visibleselector to check for parent visibility (untested):
为了满足您在评论中发布的新要求，您必须扩展:visible选择器以检查父可见性（未经测试）：
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);
