时间戳

首页 > 解决方案 > JS如何处理键盘事件

javascript - JS如何处理键盘事件

问题描述

我的任务是分别在按下向上和向下箭头键时增加和减小“气球”的大小。我已将其设置为

HTML 中的标签，当按下这些键时，它必须将字体大小设置为更大或更小 10%。然而它不起作用。大小保持不变。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event tasks</title>
</head>
<body>
    <p style="font-size: 24px;"></p>
    <button id="temp">Temp</button>
    <script src="tasks.js"></script>
</body>
</html>

JS：

const balloon = document.querySelector('p');
const defaultSize = balloon.style.fontSize;
balloon.addEventListener('keydown', event => {
    let size = balloon.style.fontSize;
    if (event.key == 'ArrowUp') {
        /*size += 0.1 * size;
        balloon.style.fontSize = size + 'px';*/
        setSize(size * 1.1);
        event.preventDefault();
    }
    else if (event.key == 'ArrowDown') {
        while (size > defaultSize) {
            /*size -= 0.1 * size;
            balloon.style.fontSize = size + 'px';*/
            setSize(size * 0.9);
            event.preventDefault();
        }
    }
});

function setSize(newSize) {
    size = newSize;
    balloon.style.fontSize = size + "px";
}

document.getElementById('temp').addEventListener('click', () => {
    setSize(40);
});

我为包含气球符号和起始大小的 p 元素设置了一个常量，以便在减小其大小时使用，这样它就不会超过某个大小。接下来只是监听事件，如果键是 ArrowUp（我尝试使用 Arrow Up 的编号，但它也不起作用）然后增加大小，或者如果它是 ArrowDown，则减小大小。我还覆盖了默认行为，因为我不确定它是什么。setSize 函数是临时的，就像按钮一样，用于查看是我没有正确编写大小增加过程还是其他问题。

标签： javascriptevent-handling

解决方案

像这样尝试（首先单击片段内部，使其具有焦点）：

const balloon = document.querySelector('p');
const defaultSize = parseFloat(balloon.style.fontSize);
let size = defaultSize;
    
window.addEventListener('keydown', event => {
    if (event.key == 'ArrowUp') {
        /*size += 0.1 * size;
        balloon.style.fontSize = size + 'px';*/
        setSize(size * 1.1);
        event.preventDefault();
    }
    else if (event.key == 'ArrowDown') {
        if (size > defaultSize) {
            /*size -= 0.1 * size;
            balloon.style.fontSize = size + 'px';*/
            setSize(size * 0.9);
            event.preventDefault();
        }
    }
});

function setSize(newSize) {
    size = newSize;
    balloon.style.fontSize = size + "px";
}

document.getElementById('temp').addEventListener('click', () => {
    setSize(40);
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event tasks</title>
</head>
<body>
    <p style="font-size: 24px;"></p>
    <button id="temp">Temp</button>
    <script src="tasks.js"></script>
</body>
</html>

变化：

  • size在事件处理程序之外定义，因此当前大小是已知的
  • defaultSize并且size是数字（而不是 eg '24px'）
  • 附加事件处理程序window以便keydown事件注册
  • 对于'ArrowDown'，使用if条件而不是while循环检查大小。

推荐阅读