Question

嘿伙计..如何使用javascript

锁定或禁用tab键

Answer 1

$(document).keydown(function(objEvent) {
    if (objEvent.keyCode == 9) {  //tab pressed
        objEvent.preventDefault(); // stops its action
    }
})

Answer 2

你可以这样做：

$(":input, a").attr("tabindex", "-1");

这将禁止在所有链接和表单元素中使用制表符聚焦。

希望这有帮助

Answer 3

在Naftali aka Neal's answer上进行扩展，这是使用香草JS以及“开始”和“停止” Tab行为按钮的方法：

let stopTabFunction = function(e) {
  if (e.keyCode == 9) {
    e.preventDefault();
  }
};
document.getElementById('stopTabButton').onclick = function() {
  document.addEventListener('keydown', stopTabFunction);
};
document.getElementById('resumeTabButton').onclick = function() {
  document.removeEventListener('keydown', stopTabFunction);
};

<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<br/><br/>
<input type="button" id="stopTabButton" value="Stop Tab!"/>
<input type="button" id="resumeTabButton" value="Resume Tab!"/>

请注意，这也适用于Shift + Tab（反向）。

JSFiddle

但是，就我而言，我希望行为有所不同：我想将Tab键的焦点基本上锁定在单个div上。为此，我在其前后放置了一个div，并给了他们两个tabindex="0"（div本身的文档定义的标签顺序），以使它们的外边缘div可聚焦，就像这样：

<div id="beforeMyDiv"></div>
<div id="myDiv">
  <!-- Only want Tab indexing to occur in here! -->
</div>
<div id="afterMyDiv"></div>

然后，我将功能从早期更改为：

//Get the div's into variables etc.
//...

let forceTabFocusFunction = function (e) {
    if (e.keyCode == 9) {
        //Force focus onto the div.
        if (!myDiv.contains(document.activeElement)) {
            if (e.shiftKey) {
                afterMyDiv.focus();
            } else {
                beforeMyDiv.focus();
            }
        }
    }
};

那技巧很好。

Answer 4

在Neal的回答中，我只添加：

if (objEvent.keyCode == 9) {  //tab pressed
    return;
}

因为当您完成输入CPF并按TAB键时，它将被视为一个字符并更改为CNPJ掩码。

完整代码：

<script type="text/javascript">
$(document).ready(function() {
    $("#cpfcnpj").keydown(function(objEvent){
        if (objEvent.keyCode == 9) {  //tab pressed
            return;
        }
        try {
            $("#cpfcnpj").unmask();
        } catch (e) {}

        var size= $("#cpfcnpj").val().length;

        if(size < 11){
            $("#cpfcnpj").mask("999.999.999-99");
        } else {
            $("#cpfcnpj").mask("99.999.999/9999-99");
        }                   
    });
});
</script>

使用javascript锁定标签键？

4 个答案: