使用 JavaScript 访问剪贴板

在本文中，我将向你展示如何使用简单的 JavaScript 代码实现：

1、 在用户操作上向剪贴板添加文本，例如按下按钮。

2、当用户复制内容时修改剪贴板的内容。

将要使用的 API 不需要任何外部库，并且具有很好的浏览器兼容性！

通过点击按钮复制

在网页上，定义一个按钮，可以点击这个个按钮快速复制指定的内容。用户只要鼠标轻轻一点就可以把需要的内容快速复制在粘贴面板，可以让用户有更加舒适的体验。

此交互可应用于快速获取 URL ，长字符串（如 SSH 密钥，终端命令，十六进制颜色或经常复制和粘贴的任何其他数据）。

为了实现这个功能，我们需要使用一个名为 execCommand() 的 JavaScript 方法。它允许我们调用许多操纵可编辑内容的不同事件，例如使文本变为粗体或者斜体、进行撤消或者重做、以及复制、剪切和粘贴。

document.execCommand('copy');

上面这段代码，和在键盘上按 ctrl + c 是一样的。

在 JavaScript 中我们可以通过 Selection API 来获取 HTML 页面中的元素。

现在创建一个小例子：

HTML 代码

    


    
This text will be inserted into the clipboard.

    Copy Text

    

JS 代码

// 通过 getElementById 方法获取 id 为 copy-button 的 button 标签
var button = document.getElementById("copy-button"); 

// 通过 getElementById 方法获取 id 为 content-holder 的 p 标签
var contentHolder = document.getElementById("content-holder");

// 监听 button 标签的点击事件,当 button 标签被点击时，触发后面的回调函数
button.addEventListener("click", function() {
    
    // 创建 createRange 方法对象
    var range = document.createRange();
    
    // 创建 getSelection 方法对象，表示用户选择的文本范围或光标的当前位置。
    var selection = window.getSelection();
    
    // 通过 selection.removeAllRanges() 方法清除选择范围
    selection.removeAllRanges();
    
    // selectNodeContents 方法选择 contentHolder 子节点的内容
    // 这里指 p 标签中的文本节点内容
    range.selectNodeContents(contentHolder);
    
    // 一个区域（Range）对象将被增加到选区（Selection）当中。
    // 将刚刚选中的 p 标签文本添加到 selection 
    selection.addRange(range);

    // execCommand 中的 copy 方法拷贝刚刚选到的内容
    document.execCommand('copy');
    
    // 重新初始化区域对象 range
    selection.removeAllRanges();

}, false);

CSS 代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    padding: 20px;
    font: normal 16px sans-serif;
    color: #555;
}

p{
    margin-bottom: 20px;
}

button{
    padding: 8px 12px;
    margin-bottom: 20px;
}

textarea {
    display: block;
    padding: 10px;
    width: 400px;
    height: 120px;
}

下方动图是功能的演示效果。只要点击复制按钮，就可以复制到上面的格言。不用使用 ctrl + c 和用鼠标选中再右键复制那么麻烦了。

希望分享的内容对大家有帮助，感谢你们的关注与支持。

点个关注，就是一份支持。