Отключение фокуса вкладок на элементах формы

Ответ 1

Простым способом является поместить tabindex = "- 1" в поле (ы), на которое вы не хотите вводить вкладку. Например,

<input type="text" tabindex="-1" name="f1">

Ответ 2

Подобно Yipio, я добавил notab="notab" в качестве атрибута для любого элемента, который я хотел также отключить. Мой jQuery - это одна строка.

$('input[notab=notab]').on('keydown', function(e){ if (e.keyCode == 9)  e.preventDefault() });

Btw, keypress не работает для многих клавиш управления.

Ответ 3

На основе простого ответа Терри я сделал это в базовой функции jQuery

$.prototype.disableTab = function() {
    this.each(function() {
        $(this).attr('tabindex', '-1');
    });
};

$('.unfocusable-element, .another-unfocusable-element').disableTab();

Ответ 4

Если вы имеете дело с элементом ввода, мне было удобно установить фокус указателя назад.

$('input').on('keydown', function(e) { 
    if (e.keyCode == 9) {
        $(this).focus();
       e.preventDefault();
    }
});

Ответ 5

$('.tabDisable').on('keydown', function(e)
{ 
  if (e.keyCode == 9)  
  {
    e.preventDefault();
  }
});

Поместить .tabDisable на все вкладки disable DIVs Как

<div class='tabDisable'>First Div</div> <!-- Tab Disable Div -->
<div >Second Div</div> <!-- No Tab Disable Div -->
<div class='tabDisable'>Third Div</div> <!-- Tab Disable Div -->

Ответ 6

Вы должны отключить или включить отдельные элементы. Вот как я это сделал:

$(':input').keydown(function(e){
     var allowTab = true; 
     var id = $(this).attr('name');

     // insert your form fields here -- (:'') is required after
     var inputArr = {username:'', email:'', password:'', address:''}

     // allow or disable the fields in inputArr by changing true / false
     if(id in inputArr) allowTab = false; 

     if(e.keyCode==9 && allowTab==false) e.preventDefault();
});

Ответ 7

Мое дело может быть не типичным, но то, что я хотел сделать, состояло в том, чтобы иметь определенные столбцы в TABLE полностью "инертные": невозможно вставить их в них и невозможно выбрать что-либо в них. Я нашел класс "невыбираемым" из других ответов SO:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Это фактически запрещает пользователю использовать мышь, чтобы поместить фокус в TD... но я не смог найти способ на SO, чтобы предотвратить табуляцию в ячейки. TDs в моем TABLE на самом деле каждый имеет DIV в качестве единственного своего ребенка, и используя console.log, я обнаружил, что на самом деле DIVs получит фокус (без фокуса, сначала получаемого TDs).

Мое решение включает в себя отслеживание "ранее сфокусированного" элемента (в любом месте страницы):

window.currFocus = document;
//Catch any bubbling focusin events (focus does not bubble)
$(window).on('focusin', function () {
  window.prevFocus = window.currFocus;
  window.currFocus = document.activeElement;
});

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

Самый простой ответ - просто сделать это (единственному ребенку DIV в каждом вновь созданном TD):

...
jqNewCellDiv[ 0 ].classList.add( 'unselectable' );
jqNewCellDiv.focus( function() {
    window.prevFocus.focus();
});         

Пока все хорошо. Должно быть ясно, что это сработает, если у вас есть только TD (без DIV child). Незначительная проблема: это просто прекращает табуляцию мертвых на своих дорогах. Ясно, что если в таблице есть больше ячеек в этой строке или строках ниже наиболее очевидных действий, которые вы хотите, это сделать вкладку tabbing в следующую неотключимую ячейку... либо в той же строке, либо, если есть другие строки, в строке ниже. Если это самый конец таблицы, он становится немного более сложным: например, куда следует переходить на табуляцию. Но все хорошее чистое удовольствие.