JS一键复制事件实现

最新推荐文章于 2024-08-16 15:55:37 发布

十二翼堕落天使

最新推荐文章于 2024-08-16 15:55:37 发布

阅读量761

点赞数

分类专栏： JS 文章标签： js 一键复制

本文链接：https://blog.csdn.net/XY1790026787/article/details/107030924

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

示例

<!DOCTYPE html>
<meta charset="UTF-8">

<div id="main">
    <label for="copy-input"></label><input type="text" id="copy-input">
    <button id="copy-btn">复制</button>
</div>

<script>
    const main = {
        copyInput: document.getElementById('copy-input'),
        copyBtn: document.getElementById('copy-btn'),
        copyMsg: document.getElementById('copy-msg')
    }

    main.copyBtn.onclick = () => {
        // 1. 选中
        main.copyInput.select()
        // 2. 复制至剪切板
        document.execCommand('Copy')
        // 3. 取消选中（失去焦点）
        main.copyInput.blur()
    }
</script>