阻止网页中的 Tab 键

Question

我有一个网络应用程序，用户可以在其中使用 Q 和 P 键快速响应神经心理刺激（这是不可更改的）。问题是，有时用户会错误地移动他们的手指然后按下 tab 键，在这种情况下，焦点会从页面主体（我理解是默认的，使用 activeElement）转移到其他地方浏览器 window（选项卡、地址栏...）。

我看到了 this 问题，并且确实尝试在捕获 keydown 事件时同时使用 event.preventDefault() 和 event.stopPropagation()，但这没有帮助。例如，如果我添加一个警报 - 它会发出警报，然后仍会继续更改焦点。

除了自定义浏览器以完全阻止 tab 密钥外，是否有人知道如何防止这种情况发生？

部分代码参考：

var ansFlag = false;

document.addEventListener("keydown", keydown);

function showTarget(){
    draw(stimInfo());
    run = setTimeout(advance,maxResponseTime);
    ansFlag = true;
    startTime = performance.now();  
}

function keydown(e) {
    e = e || window.event;
    keyCode = e.keyCode;
    if (ansFlag){
        endTime = performance.now();
        if ((keyCode == Q_KEY) || (keyCode == P_KEY)) {
            response_given = true;
            clearTimeout(run);
            advance();
        }
        else{
            return false;
        }       
    }
    else{
        if(e.key == "Tab"){
            e.preventDefault();
            e.stopPropagation();
            alert("tab!!!");
            if(e.defaultPrevented){
                console.log("saved the day!");
                return;
            }
        }
        else{
            return false;
        }
    }
}

Answer 1

我找到了一个可能有用的技巧。

当您按下 Tab 键时，浏览器只会关注您的输入。您可以隐藏此输入

当然我没有看到你的任何代码，但也许这个例子会对你有所帮助

const playground = document.querySelector('.playground');
const focusInput1 = playground.querySelector('#focus1');

window.addEventListener('keydown' , function (e) {

    if(e.keyCode === 9){
        focusInput1.focus();
    }

});

       .playground{
            background-color: blue;
            height: 500px;
            width: 100%;
        }
        .other{
            background-color: red;
            height: 500px;
            width: 100%;
        }

    <div class="playground">
        <input id="focus1">
        <input id="focus2">
    </div>

    <div class="other">

    </div>

阻止网页中的 Tab 键

Blocking tab key in a web page

javascript

events

keydown

preventdefault

stoppropagation