背景
在编写前端应用程序时，需要时常监听用户输入。通常，我们会在页面上放置输入元素，如输入框、文本域等。但是有时候，我们并不想放置这些元素，而是希望在用户按键时直接获取输入。
解决方案
方案一：使用 document 对象
document 对象代表整个 HTML 文档，包括所有的 HTML 元素。通过监听 document 上的 keydown 事件，可以捕获用户的按键。以下是示例代码：
document.addEventListener('keydown', function(event) {
console.log('key pressed: ' + event.key);
});上述代码在用户按键时输出所按下的按键。需要注意的是，如果页面中存在输入元素，那么当输入元素被聚焦时，keydown 事件将不会触发。因此，该方案仅适用于不需要输入元素的情况。
方案二：使用 contentEditable 属性
contentEditable 属性用于指定一个元素是否可编辑。如果将一个元素的 contentEditable 属性设置为 true，那么用户就可以在该元素中输入文本。通过监听该元素的 keydown 事件，可以捕获用户的按键。以下是示例代码：
<div contenteditable="true" id="editable"></div>
document.getElementById('editable').addEventListener('keydown', function(event) {
console.log('key pressed: ' + event.key);
});上述代码创建了一个可编辑的 div 元素。当用户在该元素中输入时，按键事件将被捕获。
需要注意的是，contentEditable 属性可能会影响元素的默认行为。例如，在 WebKit 内核的浏览器中，如果用户在一个可编辑元素中按下退格键，浏览器会尝试删除整个元素。因此，如果使用该方案，请仔细考虑元素的默认行为。
总结
本文介绍了两种在不放置输入元素的情况下捕获按键的方法：使用 document 对象和使用 contentEditable 属性。这些方法可以帮助开发者在一些特殊场景下捕获用户的输入。但是，需要注意的是，这些方法可能会影响页面的默认行为，因此请谨慎使用。
以上就是本文的全部内容，希望对读者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15718