个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
元素
24
4
我正在尝试制作一个按钮来选择 <code> 的内容元素。但是，它不起作用，我得到“content.select() 不是函数
<body>
<div>
<button type="button" id="copyButton" class="btn btn-primary" onclick="copyConfig()">Copy Config</button>
<br><br>
<pre><code id="contentCfg">{{ content }}</code></pre>
</div>
</body>
<script>
function copyConfig() {
const content = document.getElementById("contentCfg").textContent;
content.select();
content.setSelectionRange(0, 99999);
document.execCommand("copy");
}
</script>
不知道为什么这行不通，{{ content }}由我的模板 serve.r 自动填充文本
最佳答案
您实际上可以使用 Document.createRange() 解决此问题, Range.selectNodeContents()和 Window.getSelection()从而避免不必要的 DOM 操作。
参见 example on MDN或讨论这个问题:Selecting text in an element (akin to highlighting with your mouse)
function copyConfig() {
const contentNode = document.getElementById("contentCfg")
const range = document.createRange();
range.selectNodeContents(contentNode);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
}
const copyButton = document.getElementById('copyButton');
copyButton.addEventListener('click', copyConfig);<div>
<button type="button" id="copyButton" class="btn btn-primary">Copy Config</button>
<br><br>
<pre><code id="contentCfg">{{ content }}</code></pre>
</div>关于javascript - content.select() 不适用于 <code> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65452693/
24
4
0
我是一名优秀的程序员,十分优秀！