Как настроить фокус на первый редактируемый элемент ввода в форме

Динамически созданная форма содержит элементы ввода. Первые элементы могут быть отключены или только для чтения. Я устал код ниже, чтобы установить фокус на первый элемент, который принимает данные, чтобы включить быстрый ввод данных с клавиатуры. Однако, если элемент формы формы отключен или только для чтения, фокус не установлен. Как установить фокус на первый элемент, который принимает данные?

    <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

Я попробовал код Row W, в который был добавлен элемент ввода. Теперь он фокусируется на втором элементе. Testcase показан на в редакции 5 ответа Роба

Ответ 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;
});

Ответ 2

Использовать jQuery :not() селектор:

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

Здесь рабочая скрипка.

EDIT:

Чтобы выполнить новое требование, которое вы разместили в комментариях, вам нужно расширить селектор :visible, чтобы проверить родительскую видимость (untested):

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