网站首页前端文档正文

JavaScript 原生js实现点击按钮复制内容到剪切板

作者：weixin_44953227 更新时间： 2022-04-09 前端文档

效果图

点击按钮复制内容

上代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    .divBox {
        width: 500px;
        margin: 100px auto;
        display: flex;
    }

    .popupStyle {
        display: none;
        width: 160px;
        background-color: rgb(85, 85, 85);
        color: aqua;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: fixed;
        z-index: 1;
        top: 2%;
        left: 50%;
        margin-left: -80px;
    }
style>
<body>
    <div class="divBox">
        <div id="div">这是要复制的div内容div>
        <a href="#" onclick="handleDivCopy()">点击复制a>
    div>
    <div class="divBox">
        <textarea id="textarea">Hello,Worldtextarea>
        <a href="#" onclick="handleCopy()">点击复制a>
    div>
    <script>
        
        // 复制 div 内容
        function handleDivCopy() {
            const div = document.getElementById("div");
            const input = document.createElement("input");
            document.body.appendChild(input);
            input.value = div.innerText;
            input.select();
            
            try {
                if (document.execCommand("copy", false)) {
                    handleDomMsg("div 内容复制成功");
                } else {
                    handleDomMsg("div 内容复制失败");
                }
            } catch (error) {
                console.log(error, "error")
            } finally {
                input.remove();
            }
        };
        
        // 复制输入框内容
        function handleCopy() {
            const textarea = document.getElementById("textarea");
            textarea.select();
            try {
                if (document.execCommand("copy", false)) {
                    handleDomMsg("输入框内容复制成功");
                } else {
                    handleDomMsg("输入框内容复制失败");
                }
            } catch (error) {
                console.log(error, "error")
            }
        };


        // DOM 弹窗
        function handleDomMsg(message) {
            const div = document.createElement("div");
            document.body.appendChild(div);
            div.innerHTML = message || "this is a Message";
            div.className = "popupStyle";
            div.style.display = "block";

            setTimeout(() => {
                div.remove();
            }, 1000);
        }

    script>
body>
html>

原文链接：https://blog.csdn.net/weixin_44953227/article/details/109780877

上一篇：JavaScript 利用监听实现右键检查就 Debugge
下一篇：关于对async await效率问题的深入思考_javasc

网站首页 前端文档 正文

JavaScript 原生js实现点击按钮复制内容到剪切板

效果图

上代码

相关推荐

网站首页前端文档正文