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

IT技术 javascript html
2021-03-02 16:25:42

div在同一个表单中有几个s。我想要做的是禁用表单Tab中一个divs 中键,而不禁用div同一表单中其他s 中的选项卡

示例表格:

  • div1 - 禁用 Tab
  • div2 -Tab作品
  • div3 -Tab作品
6个回答

一个简单的方法是将 tabindex="-1" 放在您不想被标签到的字段中。例如

<input type="text" tabindex="-1" name="f1">
这对我希望防止在 TABLE 中切换到 TD 的情况不起作用。
2021-04-24 16:25:42

与 Yipio 类似,我也将notab="notab"作为属性添加到我想禁用该选项卡的任何元素。我的 jQuery 然后是一行。

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

顺便说一句,keypress不适用于许多控制键。

有没有人试过这个?这样做是为了防止元素移开,而不是移开
2021-04-26 16:25:42
@Timwi 我刚试过,它就像一个魅力。这实际上可以用来解决 OP 的问题——他只需要将该notab="notab"属性添加到他的 "tab disabled" 中的每个输入<div>,或者更新 jQuery 选择器以仅针对该中的输入<div>
2021-05-17 16:25:42

基于 Terry 的简单回答,我把它变成了一个基本的 jQuery 函数

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

$('.unfocusable-element, .another-unfocusable-element').disableTab();
这对我的情况不起作用:一个带有 TD 的表,每个表下面都有一个 DIV。
2021-04-27 16:25:42
@ - Reggie Pinkham 有趣。不过,TD 和 DIV 都可以:请参阅我的回答...
2021-05-01 16:25:42
@mikerodent – 并非所有 HTML 元素都能获得焦点。请参阅this answer给那些可以的人。
2021-05-14 16:25:42

我的情况可能不典型,但我想做的是让某些列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... 但我找不到办法防止跳入单元格。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孩子),这将起作用小问题:这只是停止在它的轨道上停止。显然,如果表格在该行或多行下方有更多单元格,您想要的最明显操作是将制表符制表符切换到下一个不可选择的单元格......在同一行上,或者,如果有其他行,在下面的行。如果它是表的最后一点,它会变得有点棘手:即应该跳到哪里去。但一切都好干净的乐趣。

您必须禁用或启用各个元素。我是这样做的:

$(':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();
});