Question

我在同一表单中有几个div个。我想要做的是禁用表单中div之一的 Tab 键，而不以相同的形式禁用其他div中的选项卡。

示例表格

div1 - 禁用标签
div2 - 标签有效
div3 - 标签有效

Answer 1

一种简单的方法是将tabindex =“ - 1”放在您不希望被选中的字段中。例如

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

Answer 2

与Yipio类似，我将notab="notab"添加为我想要禁用该选项卡的任何元素的属性。我的jQuery就是一行。

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

顺便说一下，keypress对许多控制键不起作用。

Answer 3

基于Terry的简单答案，我将其变成了一个基本的jQuery函数

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

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

Answer 4

我的情况可能并不典型，但我想要做的是让TABLE中的某些列完全＆＃34;惰性＆＃34;：无法在其中添加任何内容，并且无法在其中选择任何内容。我找到了班级＆＃34;不可选择的＆＃34;来自其他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获得。

我的解决方案包括跟踪以前关注的＆＃34;元素（页面上的任何位置）：

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孩子），这将有效。轻微的问题：这只是阻止标签死亡。显然，如果表格在该行或下面的行上方有更多单元格，那么您最不希望的是将标签选项卡制作到下一个非不可选择的单元格...要么在同一行，要么如果还有其他行，在下面的行上。如果它是表格的最后一点，它会变得有点棘手：那就是应该在哪里进行标记。但是一切都很干净。

Answer 5

如果你正在处理一个输入元素，我发现将指针焦点设置为自身是有用的。

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

Answer 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();
});

Answer 7

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

将.tabDisable放入所有选项卡禁用DIV 像

<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 -->

禁用选项卡焦点在表单元素上

7 个答案: