Определить, когда пользователь нажимает вкладку на первом или последнем элементе формы (в div)

Question

У меня есть форма HTML, распределенная по нескольким разделам.Мне нужно знать, когда пользователь нажимает клавишу табуляции, когда они находятся на первом или последнем элементе в каждом элементе div (чтобы я мог применить некоторые пользовательские функции вкладки).Для первого элемента в div я ищу Tab + Shift;для последнего элемента я ищу только Tab.Элементами могут быть текстовые поля, текстовые области, переключатели, списки выбора или флажки.

Какой самый эффективный способ обнаружения первого и последнего элементов?Рад использовать решение jQuery.

Спасибо.

Answer 1

Вы можете использовать селекторы :first-child и :last-child, чтобы найти элементы формы.Затем вы можете прикрепить обработчик событий keydown и проверить SHIFT + TAB и TAB соответственно.

$('div input:first-child').keydown(function(event) {
    if (event.which == 9 && event.shiftKey) { // Tab is keycode 9
        // Do custom tab handling
    }
});

$('div input:last-child').keydown(function(event) {
    if (event.which == 9) {
        // Do custom tab handling
    }
});

Answer 2

Звучит так, будто вы хотите, чтобы табуляция заключалась в первый и последний элемент.

• Получите первый: $('#form').find('input, textarea, select').first();
• Получите последний: $('#form').find('input, textarea, select').first();
• Привязать нажатие клавиш к элементам: .keydown()
  • Используйте это, чтобы определить, какая клавиша была нажата: jQuery Event Keypress: Какая клавиша была нажата?сфокусируйтесь на элементе, который вы хотите: .focus()

edit: логика селектора неверна

например: http://jsfiddle.net/rkw79/fuXyf/

Answer 3

Пока входные данные действительно являются первыми и последними дочерними элементами DIV, ниже будут работать. В противном случае вам нужно будет немного сложнее с выбором.

Редактировать: Мое утверждение о порядке следования детей кажется неверным. Это должно работать для большинства ситуаций. Конец редактирования

Если вы хотите, чтобы он был специфичным для определенных видов ввода или для чего-либо, что считается вводом, но на самом деле не является элементом input, селектору потребуется некоторая незначительная настройка.

Демо

http://jsfiddle.net/JAAulde/tHkdz/

код

$( '#myform' )
    .find( 'div input:first-child, div input:last-child' )
    .bind( 'keydown', function( e )
    {
        if( e.which === 9 )
        {
            //custom code here
            e.preventDefault();
        }
    } );

Answer 4

Вы можете использовать первый и последний дочерние селекторы:

var first = $("#form-name:first-child");
var last = $("#form-name:last-child");