复制粘贴demo

最新推荐文章于 2024-08-03 20:32:29 发布

派小星星~

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量80

点赞数 1

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_54503219/article/details/134543095

版权


    <button class="prase">
        复制
    </button>
    <div class="div">
        我这有一段话，我想复制到剪切板，点我复制
    </div>
    <button class="log">
        展示
    </button>
    <div class="showcontent">

    </div>

        .prase{
            margin-top: 30px;
        }
        .div{
            width: 300px;
            height: 100px;
            /* background-color: #000; */
            margin-top: 20px;
            border: 1px solid #000;
            padding: 10px;
            font-size: 18px;
            color: #000;
            cursor: pointer;
            user-select: none;
        }
        .showcontent{
            width: 300px;
            height: 100px;
            /* background-color: #000; */
            margin-top: 20px;
            border: 1px solid #000;
            padding: 10px;
            font-size: 18px;
            color: #000;
            cursor: pointer;
            user-select: none;
        }

        let div = document.querySelector('.div')
        let prase = document.querySelector('.prase')
        let log = document.querySelector('.log')
        let content = document.querySelector('.showcontent')
        log.onclick = async function () {
            try {
                // 拿到复制的文本
                let result = await navigator.clipboard.readText()
                console.log(result)
                content.innerText = result
            }catch{

            }
        }

        prase.onclick = async function () {
            try {
                navigator.clipboard.writeText(div.innerText).then(()=>{
                    alert('复制成功')
                })
                
            }catch{

            }
        }