JS如何处理键盘事件

Question

My task is to increase and decrease the size of a "balloon" when pressing the Up and Down arrow keys, respectively.我的任务是分别在按下向上和向下箭头键时增加和减小“气球”的大小。 I have set it up as a我已将其设置为

tag in HTML and when pressing those keys it has to set the fontsize to something bigger or smaller by 10%. HTML 中的标签，当按下这些键时，它必须将字体大小设置为更大或更小 10%。 Yet it doesn't work.然而它不起作用。 The size remains the same.大小保持不变。

HTML: 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: 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);
});

I set a constant to the p element that holds the balloon symbol and the starting size, to be used when decreasing its size so it couldn't go past a certain size.我为包含气球符号和起始大小的 p 元素设置了一个常数，以在减小其大小时使用，因此它不能 go 超过一定大小。 Next is just listening for the event and if the key is ArrowUp (I tried using the number of the Arrow Up and it didn't work either) then increase the size or if it's ArrowDown, decrease the size.接下来只是监听事件，如果键是 ArrowUp（我尝试使用 Arrow Up 的编号，但它也不起作用）然后增加大小，或者如果它是 ArrowDown，则减小大小。 I also override the default behaviour since I'm not sure what it is.我还覆盖了默认行为，因为我不确定它是什么。 The setSize function is temporary, just like the button, to see if either I didn't write the size increase procedure correctly or something else is at fault. setSize function 是临时的，就像按钮一样，看看是我没有正确编写大小增加程序还是有其他问题。

Answer 1

Try like this (click inside the snippet first so it has focus):像这样尝试（首先单击片段内部，使其具有焦点）：

 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>

Changes:变化：

size is defined outside of the event handler, so that the current size is known size是在事件处理程序之外定义的，因此当前大小是已知的
defaultSize and size are numbers (instead of eg '24px' ) defaultSize和size是数字（而不是例如'24px' ）
The event handler is attached to window so that the keydown events register事件处理程序附加到window以便keydown事件注册
For 'ArrowDown' , checking the size using an if condition, rather than a while loop.对于'ArrowDown' ，使用if条件而不是while循环检查大小。

Answer 2

You have Two Problem in your code:您的代码中有两个问题：

First: The Size you Get will get "24px" not "24" so you Can't Do *1.1 and even set it to balloon.style.fontSize第一：你得到的大小将得到“24px”而不是“24”所以你不能做 *1.1 甚至将它设置为balloon.style.fontSize

because it will look like因为它看起来像

balloon.style.fontSize="24pxpx"

Second: Your EventListener set into a wrong position you should set it on Window To listen your click like window.addEventListener第二：您的 EventListener 设置为错误的 position 您应该将其设置在 Window 上以聆听您的点击，例如window.addEventListener

And Here is my Simple Demo for you https://codepen.io/chawol/pen/jOMZbgv这是我的简单演示https://codepen.io/chawol/pen/jOMZbgv

Please forgive me for my bad English请原谅我英语不好

JS如何处理键盘事件

问题描述

2 个解决方案

解决方案1
0 2020-12-30 09:39:04

解决方案2
0 2020-12-30 09:44:29

JS如何处理键盘事件

问题描述

2 个解决方案

解决方案1 0 2020-12-30 09:39:04

解决方案2 0 2020-12-30 09:44:29

解决方案1
0 2020-12-30 09:39:04

解决方案2
0 2020-12-30 09:44:29