文本一键快速复制实现教程及代码

这是完整的代码,包括HTML、CSS和JavaScript部分:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>一键复制示例</title>
   <style>
        .copy-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        .copy-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>这是一个简单的HTML页面。</h1>
    <p>支持一键复制。</p>
   <button class="copy-btn" onclick="copyText()">点击复制文本</button>
   <script>
        function copyText() {
            const pText = document.querySelector('p').textContent;
            const textarea = document.createElement('textarea');
            textarea.value = pText;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('段落内容已复制到剪贴板!');
        }
    </script>
</body>
</html>
尊重版权丨本站注明原创的插件,购买者不得随意分享传播,仅限个人使用,一旦发现拉黑用户,删除使用权限。大神建站-WordPress插件开发 » 文本一键快速复制实现教程及代码

相关文章

评论 (0)