Как обрабатывать события клавиатуры JS

ProgramBox

Как обрабатывать события клавиатуры JS

Post author:admin
Запись опубликована:13 ноября, 2022
Post category:Вопросы по программированию

#javascript #event-handling

#javascript #обработка событий

Вопрос:

Моя задача состоит в том, чтобы увеличивать и уменьшать размер «воздушного шара» при нажатии клавиш со стрелками вверх и вниз соответственно. Я настроил его как

тег в 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 (я пытался использовать номер стрелки Вверх, и это тоже не сработало), то увеличьте размер или, если это ArrowDown, уменьшите размер. Я также переопределяю поведение по умолчанию, поскольку я не уверен, что это такое. Функция setSize является временной, как и кнопка, чтобы проверить, правильно ли я написал процедуру увеличения размера или что-то еще не так.

Ответ №1:

Попробуйте сделать так (сначала щелкните внутри фрагмента, чтобы он был сфокусирован).:

 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 являются числами (вместо, например '24px' ,)
Обработчик событий привязан к window , чтобы keydown события регистрировались
Например 'ArrowDown' , проверка размера с использованием if условия, а не while цикла.

1. Большое спасибо. Я решил последовать вашему ответу. Я заметил, что EventListener был привязан к неправильному элементу сразу после написания вопроса. На самом деле я не заметил проблемы с ‘pxpx’ до вашего ответа, так что спасибо. Что касается времени …. хорошее наблюдение, мой воздушный шар продолжал увеличиваться до начального размера всего после одного падения стрелки.

Ответ №2:

У вас есть две проблемы в вашем коде :

Во-первых: размер, который вы получите, будет «24px», а не «24», поэтому вы не можете сделать * 1.1 и даже установить его в balloon.style.fontSize

потому что это будет выглядеть так

balloon.style.fontSize="24pxpx"

Во-вторых: ваш EventListener установлен в неправильное положение, вы должны установить его в окне, чтобы прослушать ваш щелчок, как window.addEventListener

А вот моя Простая демонстрация для вас https://codepen.io/chawol/pen/jOMZbgv

Пожалуйста, простите меня за мой плохой английский