JS如何處理鍵盤事件
[英]How to handle keyboard events 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 元素設置了一個常數，以在減小其大小時使用，因此它不能 go 超過一定大小。 接下來只是監聽事件，如果鍵是 ArrowUp（我嘗試使用 Arrow Up 的編號，但它也不起作用）然后增加大小，或者如果它是 ArrowDown，則減小大小。 我還覆蓋了默認行為，因為我不確定它是什么。 setSize function 是臨時的，就像按鈕一樣，看看是我沒有正確編寫大小增加程序還是有其他問題。
2 個解決方案
解決方案1
0 2020-12-30 09:39:04
像這樣嘗試（首先單擊片段內部，使其具有焦點）：
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循環檢查大小。
解決方案2
0 2020-12-30 09:44:29
您的代碼中有兩個問題：
第一：你得到的大小將得到“24px”而不是“24”所以你不能做 *1.1 甚至將它設置為balloon.style.fontSize
因為它看起來像
balloon.style.fontSize="24pxpx"
第二：您的 EventListener 設置為錯誤的 position 您應該將其設置在 Window 上以聆聽您的點擊，例如window.addEventListener
這是我的簡單演示https://codepen.io/chawol/pen/jOMZbgv
請原諒我英語不好
測驗：如何處理自定義污點上的鍵盤事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.