方法一

使用浏览器提供的 document.execCommand("Copy"); 来实现复制功能，代码如下：

<a href="javascript:void(0);" onclick="copyInfo()">复制</a>
<input id="copy_data_id" type="text" value="1231231313">
<script type="text/javascript">
function copyText(selectorStr){
	try {
		var copydom = document.getElementById("copy_data_id");
		copydom.select(); // 选择对象
		document.execCommand("Copy");  // 浏览器复制
        console.log('复制成功')
    } catch (e) {
        console.log('复制失败',e)
    }
}
</script>

这种方式有中弊端，id=copy_data_id 的 input隐藏或是宽度为0 都会导致复制动作失败。

方法二 多浏览器、移动端兼容（推荐）

能够多浏览器、且移动端兼容的复制组件就是Clipboard.js，Clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。

先引入clipboard.js

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

设置复制剪贴的内容

从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

你还可以定义一个 data-clipboard-action 属性来指明你想要复制还是剪切内容

<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

复制当前的内容，需要给目标元素设置一个data-clipboard-text 属性即可

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

事件

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。 我们通过触发自定义事件，比如success 和 error 让你可以设置监听并实现自定义逻辑

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});