代码框右上角的复制功能怎么实现

由 hrs, 16 三月, 2025

如图上图，

要在代码框右上角实现复制功能，通常需要结合 HTML、CSS 和 JavaScript 来完成。以下是一个简单的实现示例：

1. HTML 结构


<div class="code-container">
   <pre><code id="code">
$int = 42;          // integer
$float = 3.14;      // float
$string = "Hello";  // string
$bool = true;       // boolean
$array = [1, 2, 3]; // array
$object = new stdClass(); // object
$null = null;       // null
$resource = fopen("file.txt", "r"); // resource
$callable = function() { return "Hello"; }; // callable
   </code></pre>
   <button class="copy-button" onclick="copyCode()">复制</button>
</div>


运行 HTML
2. CSS 样式


.code-container {
   position: relative;
   background: #f4f4f4;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
}
pre {
   margin: 0;
}
.copy-button {
   position: absolute;
   top: 10px;
   right: 10px;
   background: #007bff;
   color: white;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
}
.copy-button:hover {
   background: #0056b3;
}


3. JavaScript 功能


function copyCode() {
   const code = document.getElementById('code').innerText;
   navigator.clipboard.writeText(code).then(() => {
       alert('代码已复制到剪贴板！');
   }).catch(err => {
       console.error('复制失败: ', err);
   });
}


4. 完整示例


<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>代码复制示例</title>
   <style>
       .code-container {
           position: relative;
           background: #f4f4f4;
           padding: 10px;
           border: 1px solid #ddd;
           border-radius: 4px;
       }
       pre {
           margin: 0;
       }
       .copy-button {
           position: absolute;
           top: 10px;
           right: 10px;
           background: #007bff;
           color: white;
           border: none;
           padding: 5px 10px;
           border-radius: 4px;
           cursor: pointer;
       }
       .copy-button:hover {
           background: #0056b3;
       }
   </style>
</head>
<body>
   <div class="code-container">
       <pre><code id="code">
$int = 42;          // integer
$float = 3.14;      // float
$string = "Hello";  // string
$bool = true;       // boolean
$array = [1, 2, 3]; // array
$object = new stdClass(); // object
$null = null;       // null
$resource = fopen("file.txt", "r"); // resource
$callable = function() { return "Hello"; }; // callable
       </code></pre>
       <button class="copy-button" onclick="copyCode()">复制</button>
   </div>
   <script>
       function copyCode() {
           const code = document.getElementById('code').innerText;
           navigator.clipboard.writeText(code).then(() => {
               alert('代码已复制到剪贴板！');
           }).catch(err => {
               console.error('复制失败: ', err);
           });
       }
   </script>
</body>
</html>

 

运行 HTML

实现步骤：

HTML：创建一个包含代码和复制按钮的容器。

CSS：设置代码框的样式，并将复制按钮定位在右上角。

JavaScript：使用 navigator.clipboard.writeText 方法将代码复制到剪贴板。

注意事项：
navigator.clipboard.writeText 是现代浏览器支持的 API，如果需要兼容旧版浏览器，可以使用 document.execCommand('copy') 作为备用方案。

如果代码内容较多，可以添加滚动条或限制高度。

通过以上代码，您可以在代码框右上角实现一个简单的复制功能。

标签

评论