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

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