Руководство по Javascript - измените onclick на onkeypress - как я могу использовать клавишу пробела для обеих функций. Закрыть навигацию и открыть

Question

Только начал изучать HTML / css / javascript за последние 4 дня.

У меня проблема с моей страницей.Прямо сейчас у меня есть функция onlick на моей странице на кнопке предыдущего пользователя.

Как изменить кнопку onclick на onkeypress?

Надеясь, что страница может скользить по определенной ключевой команде вместо щелчка.

    <script>
        function openNav() {
            document.getElementById("users").style.width = "100%";
        }

        function closeNav() {
            document.getElementById("users").style.width = "0%";
        }
    </script>

    <div id="users" class="loggedusers">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a href="#">Previous logged Users</a> 
        <div id="previoususer">
            <span style="font-size:35px;cursor:pointer;" onclick="openNav()">&rArr; Previous Users</span>
        </div>

Answer 1

События клавиатуры

В JavaScript у нас есть три события клавиатуры

1. keydown
2. keypress
3. keyup

срабатывает именно в этом порядке.

на мой взгляд, лучший способ работы с навигацией с помощью клавиатуры - использовать событие keydown, как в примере Сандеша.

Обработка событий

Для обработки этих событий у вас есть 3 способа: (примеры для «keydown»)

1. в разметке

<element onkeydown="myScript">

2. JavaScript element.onkeydown

object.onkeydown = function(){myScript};

3. JavaScript element.addEventListener

object.addEventListener("keydown", myScript);

Из-за проблем с безопасностью лучше всего использовать третий. (Вы можете получить больше информации, прибегая к помощи «XSS» или «межсайтовых сценариев»). Для предотвращения XSS на вашем сайте вам нужно добавить некоторые заголовки http, которые блокируют встроенные сценарии ( CSP ).

кроме того, вы можете передать true третьему параметру метода addEventListener, чтобы захватить событие перед его отправкой в ​​любой EventTarget под ним в дереве DOM, а затем вы можете остановить распространение, если код ключа соответствует зарезервированному. Это зависит от опыта пользователя, который вы хотите реализовать.

* 1051 Кодовые ключи * Попробуйте этот сайт, чтобы получить коды клавиш: keycode.info на мой взгляд, для вашего случая лучше всего использовать event.code. Ресурсы:

MDN - нажатие клавиши

MDN - addEventListener

Answer 2

Вам нужно использовать событие keypress в окне и вызывать функцию внутри if statements, когда пользователь нажимает определенную клавишу.

   function openNav() {
        document.getElementById("users").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("users").style.width = "0%";
    }

    window.addEventListener("keydown", function(e) {
        if(e.keyCode === 38) { 
            closeNav(); // this function will be executed when user press Arrow Up key 
        }else if(e.keyCode === 40) {
            openNav(); // this function will be executed when user press Arrow Down key
        }
    });

Здесь window.addEventListener выполняет функцию, которая находится внутри него, когдаПользователь нажимает клавишу.И если операторы вызовут функцию closeNav(), если нажата стрелка вверх, и вызовут функцию openNav(), если нажата стрелка вниз.если нажаты другие клавиши, если операторы не будут выполняться.

Answer 3

Если вы хотите, чтобы вся ваша страница реагировала на событие нажатия клавиши, а не просто на поле ввода, вы можете использовать это:

    document.onkeypress =  keyPressFunction;
    function keyPressFunction(e){
        // here comes your keypress-code
        var charCode = (typeof e.which == "number") ? e.which : e.keyCode
        console.log(charCode);
    }

Просто поместите этот фрагмент внутри тега сценария.

Answer 4

Как и onclick, существует три вида событий клавиатуры. onkeydown, onkeyup и onkeypress.

• onkeydown испускается, когда пользователь нажимает кнопку (только нажатие)
• onkeyup испускается, когда пользователь отпускает кнопку
• onkeypress испускается, когда пользователь нажимает кнопку

Answer 5

Для этого можно использовать событие keypress: https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Например:

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keypress', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
  if(e.code == 'ArrowLeft') {
    //Slide to the left
  }
  if(e.code == 'ArrowRight') {
    //Slide to the right
  }
}

С помощью e.code вы можете запросить нажатую клавишу.Примеры:

ArrowUp
ArrowLeft
ArrowRight
ArrowDown