【问题标题】：Javascript guide - change onclick to onkeypress-- how can I use the space key for both functions. To close the nav and openJavascript 指南 - 将 onclick 更改为 onkeypress - 如何将空格键用于这两个功能。关闭导航并打开
【发布时间】：2023-06-10 18:23:01
【问题描述】：

最近 4 天内刚开始学习 HTML/css/javascript。

我的页面有问题。现在，我在上一个用户按钮的页面上有 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>

【问题讨论】：

欢迎来到 *.com，首先，有 3 种类型的键盘事件：onkeypress、onkeyup、onkeydown *.com/a/929739/494344 和处理事件见：*.com/a/39303058/494344

标签： javascript html dom

【解决方案1】：

您可以为此使用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

【讨论】：

【解决方案2】：

如果您希望整个页面对按键事件做出反应，而不是仅对输入字段做出反应，您可以使用：

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

只要把这个 sn-p 放在你的脚本标签中。

【讨论】：

【解决方案3】：

像onclick 一样，有三种键盘事件。 onkeydown、onkeyup 和 onkeypress。

onkeydown在用户按下按钮时发出（仅限按下）
onkeyup 在用户释放按钮时发出
onkeypress 在用户按下按钮时发出

【讨论】：

【解决方案4】：

您需要在窗口上使用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 在用户按键时执行其中的函数。如果按下向上箭头，if 语句将调用closeNav() 函数，如果按下向下箭头，将调用openNav() 函数。如果其他键被按下 if 语句将不会运行。

【讨论】：

我不能用同一个键打开和关闭？

【解决方案5】：

键盘事件

在 javascript 中我们有三个键盘事件

keydown
keypress
keyup

完全按此顺序触发。

在我看来，使用键盘导航的最佳方式是使用 Sandesh 示例中的“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 方法的第三个参数，以在将事件分派到DOM 树中其下方的任何EventTarget 之前捕获事件，然后如果键码与保留的键码匹配，则可以停止传播。这取决于您要实现的用户体验。

键码

试试这个网站获取密钥代码：keycode.info

在我看来，对于您的情况，最好的方法是使用event.code。

资源：

MDN - keypress

MDN - addEventListener

【讨论】：