前言

这里需要使用 document.execCommand() API，执行一个对当前文档，当前选择或者给出范围的命令，来处理 HTML 数据，用于实现复制功能。

document.execCommand()

【语法】

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

【返回值】

布尔值 ，如果是 false 则表示操作不被支持或未被启用。

注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性。

【参数】

1. aCommandName：一个 DOMString ，命令的名称。可用命令列表请参阅命令 （我们用 “copy” 命令）。
2. aShowDefaultUI：一个 Boolean， 是否展示用户界面，一般为 false（Mozilla 没有实现）。
3. aValueArgument：一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null。

实现

通过了解 document.execCommand() API，或许你已经有了思路。

【HTML】

<input type="text" id="input" value="hello">
<button id="button" onclick="copy()">点击复制</button>

【JavaScript】

// 实现复制到剪贴板功能函数
function copy(){// 获取输入框元素let input = document.getElementById('input')// 选中元素中的文本（必须可编辑）input.select()// 检测复制命令返回值（是否可用）if(document.execCommand('copy')){document.execCommand('copy')//执行复制到剪贴板window.alert('已复制！')//反馈信息}// 无法复制（不可用）else{window.alert('复制失败！')//反馈信息}
}

写在后面

以上是一个非常简单的 demo，如果你想进一步探索，请移步 MDN。