我div
在同一个表单中有几个s。我想要做的是禁用表单Tab中一个div
s 中的键,而不禁用div
同一表单中其他s 中的选项卡。
示例表格:
- div1 - 禁用 Tab
- div2 -Tab作品
- div3 -Tab作品
我div
在同一个表单中有几个s。我想要做的是禁用表单Tab中一个div
s 中的键,而不禁用div
同一表单中其他s 中的选项卡。
示例表格:
一个简单的方法是将 tabindex="-1" 放在您不想被标签到的字段中。例如
<input type="text" tabindex="-1" name="f1">
与 Yipio 类似,我也将notab="notab"
作为属性添加到我想禁用该选项卡的任何元素。我的 jQuery 然后是一行。
$('input[notab=notab]').on('keydown', function(e){ if (e.keyCode == 9) e.preventDefault() });
顺便说一句,keypress
不适用于许多控制键。
基于 Terry 的简单回答,我把它变成了一个基本的 jQuery 函数
$.prototype.disableTab = function() {
this.each(function() {
$(this).attr('tabindex', '-1');
});
};
$('.unfocusable-element, .another-unfocusable-element').disableTab();
我的情况可能不典型,但我想做的是让某些列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();
});