Javascript 禁用表单元素上的选项卡焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3682812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling tab focus on form elements
提问by asmi
I have several divs within the same form. What I am trying to do is to disable the Tabkey in one of the divs in the form without disabling the tab in the other divs in the same form.
我div在同一个表单中有几个s。我想要做的是禁用表单Tab中一个divs 中的键，而不禁用div同一表单中其他s 中的选项卡。
Example Form:
示例表格：
- div1 - disable Tab
- div2 - Tabworks
- div3 - Tabworks
- div1 - 禁用 Tab
- div2 -Tab作品
- div3 -Tab作品
回答by Terry
A simple way is to put tabindex="-1" in the field(s) you don't want to be tabbed to. Eg
一个简单的方法是将 tabindex="-1" 放在您不想被标签到的字段中。例如
<input type="text" tabindex="-1" name="f1">
回答by the Hampster
Similar to Yipio, I added notab="notab"as an attribute to any element I wanted to disable the tab too. My jQuery is then one line.
与 Yipio 类似，我也将notab="notab"作为属性添加到我想禁用该选项卡的任何元素。我的 jQuery 就是一行。
$('input[notab=notab]').on('keydown', function(e){ if (e.keyCode == 9) e.preventDefault() });
Btw, keypressdoesn't work for many control keys.
顺便说一句，keypress不适用于许多控制键。
回答by Reggie Pinkham
Building on Terry's simple answer I made this into a basic jQuery function
基于 Terry 的简单回答，我把它变成了一个基本的 jQuery 函数
$.prototype.disableTab = function() {
this.each(function() {
$(this).attr('tabindex', '-1');
});
};
$('.unfocusable-element, .another-unfocusable-element').disableTab();
回答by mike rodent
My case may not be typical but what I wanted to do was to have certain columns in a TABLEcompletely "inert": impossible to tab into them, and impossible to select anything in them. I had found class "unselectable" from other SO answers:
我的情况可能不典型，但我想做的是让某些列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;
}
This actually prevents the user using the mouse to put the focus in the TD... but I couldn't find a way on SO to prevent tabbing into cells. The TDsin my TABLEactually each has a DIVas their sole child, and using console.logI found that in fact the DIVswould get the focus (without the focus first being obtained by the TDs).
这实际上可以防止用户使用鼠标将焦点放在TD... 但我找不到办法防止跳入单元格。将TDs在我TABLE实际上每个人都有一个DIV作为自己唯一的孩子，并使用console.log我发现，其实DIVs会得到焦点（没有首先由所获得的焦点TDs）。
My solution involves keeping track of the "previously focused" element (anywhere on the page):
我的解决方案涉及跟踪“以前关注的”元素（页面上的任何地方）：
window.currFocus = document;
//Catch any bubbling focusin events (focus does not bubble)
$(window).on('focusin', function () {
window.prevFocus = window.currFocus;
window.currFocus = document.activeElement;
});
I can't really see how you'd get by without a mechanism of this kind... jolly useful for all sorts of purposes ... and of course it'd be simple to transform it into a stack of recently focused elements, if you wanted that...
我真的不知道如果没有这种机制你会怎么过……对各种目的都很有用……当然，将它转换成一堆最近关注的元素很简单，如果你想要...
The simplest answer is then just to do this (to the sole DIVchild in every newly created TD):
最简单的答案就是这样做（对DIV每个新创建的唯一孩子TD）：
...
jqNewCellDiv[ 0 ].classList.add( 'unselectable' );
jqNewCellDiv.focus( function() {
window.prevFocus.focus();
});
So far so good. It should be clear that this would work if you just have a TD(with no DIVchild).
Slight issue: this just stops tabbing dead in its tracks. Clearly if the table has any more cells on that row or rows below the most obvious action you'd want is to making tabbing tab to the next non-unselectable cell ... either on the same row or, if there are other rows, on the row below. If it's the very end of the table it gets a bit more tricky: i.e. where should tabbing go then. But all good clean fun.
到现在为止还挺好。应该清楚的是，如果您只有一个TD（没有DIV孩子），这将起作用。小问题：这只是停止在它的轨道上停止。显然，如果表格在该行或多行下方有更多单元格，您想要的最明显操作是将制表符制表符切换到下一个不可选择的单元格...在下面的行。如果它是表的最后一点，它会变得更加棘手：即应该在哪里进行跳格。但一切都好干净的乐趣。
回答by Liam Hogan
If you're dealing with an input element, I found it useful to set the pointer focus to back itself.
如果您正在处理输入元素，我发现将指针焦点设置为返回自身很有用。
$('input').on('keydown', function(e) {
if (e.keyCode == 9) {
$(this).focus();
e.preventDefault();
}
});
回答by Sajitha Rathnayake
$('.tabDisable').on('keydown', function(e)
{
if (e.keyCode == 9)
{
e.preventDefault();
}
});
Put .tabDisable to all tab disable DIVs Like
将 .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 -->
回答by Yipyo Ai
You have to disable or enable the individual elements. This is how I did it:
您必须禁用或启用各个元素。我是这样做的：
$(':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();
});
