jQuery: Як захопити натискання клавіші TAB в текстовому полі


Відповіді:


249

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

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

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

Перевірте приклад тут .


коли я натискаю TAB в IE6 + подія не спрацьовує (вона спрацьовує на будь-якому буквено-цифровому ключі) ... мені потрібно використовувати .live ('keypress', fn)
Джон Еріксон,

Якщо ви працюєте лише з трансляцією, можливо, ви вставляєте елемент свого текстового поля динамічно, якщо елемент вже є на сторінці, він буде працювати, перевірте цей приклад: jsbin.com/oguhe
CMS

так, текстове поле динамічно вставляється. мій приклад з id #textbox полягав у тому, щоб просто спростити питання =)
Джон Еріксон,

@Jon, причина того, що ви не використовуєте $ (selector) .live ("keydown", fn), є? CMS пропонує , використовуючи KeyDown , тому що в IE, що не натискання на роботу noncharacter клавіш (наприклад, Tab)
Marc

5
@AppleGrew: це говорить так, так, але це неправда - принаймні для натискання клавіші. Для Tab, наприклад, 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();подвійний, щоб не вставляти пробіл у текстове поле.
stil

12
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});

2
Також для скасування дії за замовчуванням використовуйте e.preventDefault (); у першому рядку функції.
Джош Лейтцель

@ Джон, натискання клавіші не захоплення ключів noncharacter в IE
Marc

@Marc Я бачу це, як я можу бути сумісним з IE та FF?
Джон Еріксон

4
^^ Іронія ... jQuery повинен подолати розрив між броузерами, так що вам не доведеться турбуватися про подібні речі.
Jagd

@Jagd, jQuery не може зробити висновок про наміри. натискання клавіш і натискання клавіш не є рівнозначними з належних причин. Просто так буває, ця ситуація не потребує розрізнення.
Марк

7

Наведені вище методи не працювали для мене, можливо, я використовую трохи старий jquery, тоді, нарешті, наведений нижче фрагмент коду працює для - розміщення про всяк випадок, якщо хтось на моїй же посаді

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});

5

Важливою частиною використання клавіші вниз на вкладці є те, що вкладка завжди намагатиметься зробити щось, не забудьте в кінці "повернути помилкове".

Ось що я зробив. У мене є функція, що працює на .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");
            }
        }
    });


1

Припустимо, у вас TextBox з Id txtName

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

1

Ви можете захопити вкладку події за допомогою цього API JQuery.

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

працює для мене після додавання 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'); } });

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.