如何将按键输入写入DOM？现有代码失效求修正方案

原代码的核心问题 #

• 死循环卡死主线程：while(1===1)是无限循环，JS是单线程模型，这个循环会完全占用执行栈，浏览器无法处理键盘事件、DOM渲染等任何其他任务，直接导致页面无响应。
• 事件绑定错误：document.onkeypress(keys())是直接调用了keys函数，而非将其作为事件处理函数绑定。正确的做法是传递函数引用，不能加括号（加括号会立即执行函数）。
• 按键值获取错误：KeyboardEvent.name是事件构造函数的固定名称（值为"KeyboardEvent"），不是用户按下的具体按键内容，需要从事件对象中获取key属性。

修复后的代码方案 #

方案一：使用onkeypress赋值绑定

let text = "";
function keys(event) {
    // 从事件对象中获取实际按下的按键
    const key = event.key;
    text += key;
    // 用textContent更新纯文本，比innerHTML更安全高效
    document.querySelector("#text").textContent = text;
}
// 绑定事件处理函数，传递函数引用而非立即执行
document.onkeypress = keys;

方案二：使用更推荐的addEventListener（支持多事件绑定）

let text = "";
// 提前获取DOM元素，避免重复查询
const displayElement = document.querySelector("#text");

function handleKeyPress(event) {
    text += event.key;
    displayElement.textContent = text;
}

// 绑定keypress事件
document.addEventListener("keypress", handleKeyPress);

关键修改说明 #

1. 移除无限循环：事件监听是浏览器异步触发的，无需主动轮询，用户按键时浏览器会自动调用处理函数。
2. 正确绑定事件：直接赋值函数引用（document.onkeypress = keys）或使用addEventListener，确保函数在按键时才执行。
3. 利用事件对象获取按键：事件处理函数会自动接收浏览器传递的事件参数，通过event.key获取用户按下的具体字符。
4. 替换innerHTML为textContent：如果仅展示纯文本，textContent能避免XSS安全风险，且渲染性能更优。

内容的提问来源于stack exchange，提问作者atypicalprogrammer