html+js实现不可编辑框用来复制提前预设好的代码，简单的可以复制编辑框预设的代码，带复制按钮，并且编辑框不可编辑
下面是一个简单的 HTML 示例，其中包括一个不可编辑的文本框和一个按钮，用于将文本框中的内容复制到剪贴板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy to Clipboard</title>
<style>
/* Simple styling for the text area and button */
#code-box {
width: 100%;
height: 2000px;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
font-family: monospace;
background-color: #f9f9f9;
}
#copy-btn {
margin-top: 10px;
}
</style>
</head>
<body>
<!-- Button to copy content to clipboard -->
<button id="copy-btn">Copy Code</button>
<!-- Non-editable text area with default content -->
<textarea id="code-box" readonly>
代码放这里
</textarea>
<script>
document.getElementById('copy-btn').addEventListener('click', function() {
var codeBox = document.getElementById('code-box');
codeBox.select();
document.execCommand('copy');
alert('Code copied to clipboard!');
});
</script>
</body>
</html>代码说明：
- HTML结构：
- 一个 textarea 元素，用于显示代码，设置了 readonly 属性以使其不可编辑。
- 一个按钮 Copy Code，用于触发复制操作。
- CSS：
- 为 textarea 和按钮添加了一些简单的样式。
- JavaScript：
- 通过点击按钮，选择 textarea 中的文本，并使用 document.execCommand('copy') 将文本复制到剪贴板。之后，显示一个提示框，通知用户代码已被复制。
- 将这个代码复制到一个 .html 文件中，然后用浏览器打开，你将会看到一个不可编辑的文本框和一个复制按钮。