在HTML中使用原生的JavaScript来复制文本，通常会涉及到创建一个临时的 `textarea` 或者 `input` 元素，将需要复制的文本设置到该元素的 `value` 属性中，然后执行复制命令。关于按钮的一部分，你可以保持不变。下面是如何实现此功能的代码示例：
首先，需要一个按钮来触发复制操作，这个按钮可以保持不变，但是去掉内联 `onclick` 事件处理，最好将事件监听器放在单独的脚本中，以遵循良好的实践：
<button id="copyButton" class="btn btn-default" value="复制">复制</button>
此外，需要一个元素来显示输出内容的地方，这里我使用了 `div`，你可以根据实际情况使用 `textarea` 或其他元素：
<div id="output">这里是要复制的内容</div>
然后在一个单独的脚本中，可以监听按钮的点击事件来执行复制功能：
<script>
document.addEventListener('DOMContentLoaded', function() {
var copyButton = document.getElementById('copyButton');
var output = document.getElementById('output');
copyButton.addEventListener('click', function() {
var range = document.createRange();
range.selectNode(output);
window.getSelection().removeAllRanges(); // Clear current selection
window.getSelection().addRange(range); // Select the text content within `output`
try {
// Execute the copy command
var successful = document.execCommand('copy');
var msg = successful ? '成功复制文本!' : '无法复制文本';
console.log(msg);
} catch (err) {
console.log('复制时发生错误', err);
}
// Remove the selection - no longer necessary in here
window.getSelection().removeAllRanges();
});
});
</script>这段脚本首先监听 `DOMContentLoaded` 事件来确保DOM完全加载后再绑定事件。然后，它为 `copyButton` 添加了一个 `click` 事件监听器，当点击时，它会创建一个 `Range` 对象来选择 `output` 元素的内容，然后使用 `document.execCommand('copy')` 方法来复制选中的文本。如果成功，它将在控制台显示一条消息，如果失败，则显示另一条消息。最后，它清除所做的选择。
注意：`document.execCommand` 方法已经被认为是过时的，并且在某些浏览器上可能不再支持。现代替代方法是使用 `navigator.clipboard.writeText()`，但是这需要用户的交互（如点击事件），并且因为它返回一个Promise，所以错误处理会有所不同。如果浏览器环境支持和允许使用 `navigator.clipboard` API，建议使用以下方式：
copyButton.addEventListener('click', function() {
navigator.clipboard.writeText(output.innerText).then(function() {
console.log('成功复制文本!');
}).catch(function(err) {
console.log('复制时发生错误', err);
});
});在利用 `navigator.clipboard.writeText()` 时，我们不需要创建 `Range` 或操作选择，只需要直接将要复制的文本传递给此函数即可。