Блокировка вкладки на веб-странице - PullRequest
Новая
       97

Блокировка вкладки на веб-странице

1 голос
/ 16 февраля 2020

У меня есть веб-приложение, в котором пользователи быстро реагируют на нервно-психологические раздражители с помощью клавиш Q и P (это нельзя изменить). Проблема в том, что иногда пользователи ошибочно перемещают палец, а затем нажимают клавишу tab, и в этом случае фокус смещается с тела страницы (которое, как я понимаю, используется по умолчанию, с использованием activeElement) в другое место в окне браузера ( вкладки, адресная строка, ...).

Я видел этот вопрос и действительно пытался использовать и event.preventDefault(), и event.stopPropagation() при перехвате события keydown, но это не не поможет Если, например, я добавляю оповещение - оно предупреждает, а затем продолжает менять фокус.

У кого-нибудь есть идеи, как этого избежать, кроме настройки браузера на полную блокировку ie 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;
        }
    }
}

1 Ответ

1 голос
/ 16 февраля 2020

Я нашел способ для этого, который может помочь.

Когда вы нажимаете клавишу табуляции, браузер фокусируется только на вашем вводе. Вы можете скрыть этот ввод

Конечно, я не видел от вас никакого кода, но, возможно, этот пример поможет вам 

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>
...