JQuery: как захватить нажатие клавиши TAB в текстовом поле

145

Я хочу захватить нажатие клавиши TAB, отменить действие по умолчанию и вызвать мою собственную функцию JavaScript.

Джон Эриксон
источник

Ответы:

249

Редактировать: так как ваш элемент вставляется динамически, вы должны использовать делегированный,on() как в вашем примере, но вы должны привязать его к событию keydown, потому что, как отмечает @Marc, в IE событие нажатия клавиш не захватывает не символьные клавиши:

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

Проверьте пример здесь .

CMS
источник
когда я нажимаю TAB в IE6 +, событие не запускается (хотя оно запускается на любой буквенно-цифровой клавише) ... Мне нужно использовать .live ('keypress', fn)
Джон Эриксон
Если работает только с live, возможно, вы вставляете элемент textbox динамически, если элемент уже находится на странице, он будет работать, проверьте этот пример: jsbin.com/oguhe
CMS
да, текстовое поле вставляется динамически. мой пример с идентификатором #textbox был просто для упрощения вопроса =)
Джон Эриксон
@Jon, причина, по которой вы не используете $ (селектор) .live ("keydown", fn)? CMS предлагает использовать keydown, потому что в IE нажатие клавиш не работает для нехарактерных клавиш (таких как Tab)
Marc
5
@AppleGrew: так сказано, да, но это неправда - по крайней мере, для нажатия клавиш. Для Tab e.which 0 и e.keyCode 9 (как и должно быть). Протестировано в FF 3.5.16, jQuery 1.6.2.
Johndodo
19

Рабочий пример в jQuery 1.9:

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});
Бузоганы Ласло
источник
2
сделайте e.preventDefault();двойной, чтобы предотвратить вставку пробела в текстовое поле.
сих пор
12
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});
Джон Эриксон
источник
2
Также, чтобы отменить действие по умолчанию, используйте e.preventDefault (); в первой строке функции.
Джош Лейцель
@Jon, нажатие клавиш не фиксирует нехарактерные ключи в IE
Marc
@ Марк, я вижу, как я могу быть совместимым с IE и FF?
Джон Эриксон
4
^^ Ирония ... Предполагается, что jQuery ликвидирует разрыв между броузерами, так что вам не придется беспокоиться о подобных вещах.
Джагд
@ Jagd, jQuery не может понять намерения. нажатие клавиши и нажатие клавиши не являются вескими причинами. Так уж получилось, эта ситуация не требует различия.
Marc
7

Вышеуказанные методы не работают для меня, может быть, я использую немного старый JQuery, то, наконец, нижеприведенный фрагмент кода работает для публикации на случай, если кто-то в моей позиции

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});
Oxi
источник
5

Важной частью использования клавиши на вкладке является знание того, что tab всегда будет пытаться что-то сделать, не забудьте в конце «вернуть false».

Вот что я сделал. У меня есть функция, которая работает на .blur, и функция, которая меняет фокус в моей форме. В основном это добавляет ввод в конец формы и идет туда во время выполнения расчетов на размытие.

$(this).children('input[type=text]').blur(timeEntered).keydown(function (e) {
        var code = e.keyCode || e.which;
        if (code == "9") {
            window.tabPressed = true;
            // Here is the external function you want to call, let your external
            // function handle all your custom code, then return false to
            // prevent the tab button from doing whatever it would naturally do.
            focusShift($(this));
            return false;
        } else {
            window.tabPressed = false;
        }
        // This is the code i want to execute, it might be different than yours
        function focusShift(trigger) {
            var focalPoint = false;
            if (tabPressed == true) {
                console.log($(trigger).parents("td").next("td"));
                focalPoint = $(trigger).parents("td").next("td");

            }
            if (focalPoint) {
                $(focalPoint).trigger("click");
            }
        }
    });
Джордан Фриер Инструмент
источник
4

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

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});
Carlos
источник
1

Предположим, у вас есть TextBox с идентификатором txtName

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
}); 
UJS
источник
1

Вы можете захватить вкладку событий, используя этот JQuery API.

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});
heronsanches
источник
это работает для меня после добавления evt.preventDefault (); в if
LowFieldTheory
-1

Это сработало для меня:

$("[id*=txtName]").on('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('Tab Pressed'); } });

Вентас Уругвай
источник