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

Question

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

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

如何将焦点设置为vist visible，enabled和not readonly元素？

更新3

我尝试了添加输入元素的Row W代码。 现在它将焦点放在第二个元素上。 测试用例显示在Rob W的答案修订版5中

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

Answer 2

使用jQuery的:not()选择器：

$("#myForm :input:not([readonly='readonly']):not([disabled='disabled']):reallyvisible").first()
                                                                                      .focus();

这是一个工作小提琴 。

编辑：

为了满足您在评论中发布的新要求，您必须扩展:visible选择器以检查父可见性（未经测试）：

jQuery.extend(
  jQuery.expr[ ":" ], 
  { reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);