Выберите первый элемент в наборе селекторов CSS

Question

В проекте, над которым я работаю, одним из условий, которые мы хотим настроить для наших пользователей, является то, что когда мы открываем модальный, мы автоматически фокусируем первый элемент (. вход или выпадающий список) открываемый модальный, который может принимать входной код JQuery для этого что легко:

$firstElement.focus(); 

проблема, становится, что первый элемент.

модальностей нашего приложения иногда начинают с input с (например, текст, флажки, дат и т.д.), но иногда с select с (например, выпадающие.) Таким образом, получение $firstElement немного сложно, потому что мне нужно выполнить выбор как следующий псевдокод:

(input, select):first 

Однако ближе всего я был в состоянии получить на основе моих знаний CSS селекторов:

input:first, select:first 

Вопрос : С помощью селекторов CSS, каким образом я могу выбрать первый элемент набора входов и выбрать? Или мне нужна более сложная реализация JavaScript для выполнения первой задачи «focus first input», которую я пытаюсь сделать?

Answer 1

Попробуйте это:

var $firstElement = $("input, select, textarea").first(); 

---

Добавление:

В случае, если вы используете скрытый inputs, есть способ обойти это также:

var $firstElement = $("input, select, textarea").filter(':visible:first'); 

Answer 2

Вы можете использовать $.fn.first()

Сократите набор соответствующих элементов к первой в наборе.

$('input, select').first().focus(); 

Answer 3

var tabbableElements = 'a[href], area[href], input:not([type="radio"]):not([disabled]),' + 
           'input[type="radio"]:checked:not([disabled]),' + 
           'select:not([disabled]), textarea:not([disabled]),' + 
           'button:not([disabled]), iframe, object, embed, *[tabindex],' + 
           '*[contenteditable]'; 
var $allTabbableElements = $(context).find(tabbableElements).filter(':visible'); 
var firstTabbableElement = $allTabbableElements.first()[0]; 

Это часть кода, который я использую для сохранения фокуса внутри модального. Надеюсь, поможет.