javascript - Html 元素允许 Ctrl+A 组合其中的文本

Question

我正在创建一个允许用户在表单中输入一些数据的网站，提交后的表单将返回一个 JSON。我的网站有页眉、页脚等。现在，我在 div 中显示 JSON。

我的问题:JSON 可能非常大。理想情况下，我网站的用户能够复制 JSON 结果并将其用于其他目的。如果用户尝试通过 Ctrl+A 选择整个 JSON，它将选择我网站中的所有文本，即页眉和页脚。如果用户只想获取 JSON(而且它非常大)，他/她将不得不手动选择 JSON。

是否有一个 HTML 元素可用于在其中呈现 JSON(而不是 div)，以便当光标聚焦于该元素时，它允许 Ctrl+A 仅选择该元素内的所有文本？类似于此:http://www.jsoneditoronline.org/

我一直在寻找不同的 HTML 元素，例如 pre，但它们没有实现我的目标。也许我没有使用正确的关键字在搜索引擎中进行搜索。

谢谢。

Answer 1

textarea 元素可以解决这个问题，或者将 contenteditable="true" 添加到任何元素，他们也可以通过这种方式进行选择。另外检查https://clipboardjs.com/这将允许您为他们自动将内容复制到用户剪贴板。