javascript - 如何将焦点设置到表单中的第一个可编辑输入元素

Question

动态创建的表单包含输入元素。第一个元素可能被禁用或只读。 我厌倦了下面的代码，将焦点设置为接受数据以启用快速数据输入表单键盘的第一个元素。 但是，如果表单拳头元素被禁用或只读，则不会设置焦点。 如何将焦点设置到接受数据的第一个元素？

    <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>

更新

抱歉，还有隐藏的输入字段。提供的答案将焦点设置到隐藏元素。 Answr 包含函数未找到任何元素。ˇ

这是更新测试用例:

$(function () {
  $("#form :input:not([readonly='readonly']):not([disabled='disabled'])").first() 
                                                                        .focus(); 
});

如何将焦点设置为可见、启用且非只读元素？

更新 3

我尝试了添加输入元素的行 W 代码。 现在它将焦点设置到第二个元素。测试用例显示在 Revision 5 of Rob W's answer

Answer 1

使用以下代码:

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();

如果只想选择第一个元素，下面的代码效率更高:

$('#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;
    }
});

更新:如果您希望元素的顺序相同，请使用:

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;
});