【教程】HTML用Jquery为pre标签代码块增加复制代码功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Copy Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// 为每个pre标签添加复制按钮
$('pre').wrap('<div class="code-container"></div>');
$('.code-container').append('<button class="copy-code-btn">复制代码</button>');
// 点击按钮时复制代码文本到剪贴板
$('.copy-code-btn').click(function(){
var $pre = $(this).parent().find('pre');
var codeText = $pre.text().trim(); // 获取代码文本并去除首尾空格
navigator.clipboard.writeText(codeText).then(function() {
console.log('代码复制成功！');
}).catch(function(error) {
console.error('复制代码失败', error);
});
});
});
</script>
<style>
.code-container {
position: relative;
overflow: hidden; /* 确保按钮在代码外部 */
}
.copy-code-btn {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
background: #fff;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
user-select: none; /* 防止按钮文本被选中 */
}
</style>
</head>
<body>
<pre>
// 这是一段示例代码
console.log('Hello, world!');
</pre>
</body>
</html>这段代码使用jQuery为页面上的<pre>代码块添加了一个复制按钮，点击按钮时会把代码块的内容复制到用户的剪贴板中。这是一个简单的实现，但不考虑兼容性和错误处理。在实际应用中，你可能需要添加更多的错误处理和兼容性代码。
评论已关闭