js复制到剪切板的方法
墨初 Web前端 355阅读
前端开发工作中，有时候需要有复制文本内容或者剪切文本内容这个需求，下面就说一种使用js集成插件clipboard.js来实现纯js复制或剪切到剪切板的效果。
js实现复制或剪切到剪切板的效果
1、js复制到剪切板的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>73so博客 </title>
</head>
<body>
<div class="box">
<div class="text">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<button type="button" id="btn">点击复制</button>
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script type="text/javascript">
var clipboard = new ClipboardJS('#btn', {
// 通过target指定要复制的节点
target: function() {
return document.querySelector('.text');
}
//此时.text中的内容已经在剪贴板中了
});
clipboard.on('success', ()=> {
alert("复制成功！");
});
clipboard.on('error', ()=> {
alert('复制失败！');
});
</script>
</body>
</html>2、js剪切到剪切板的错误
<!DOCTYPE html>
<html">
<head>
<meta charset="UTF-8">
<title>73so博客</title>
</head>
<body>
<textarea id="bar">剪切剪切剪切剪切剪切</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
点击剪切文字
</button>
<br />
<input placeholder="你可以在这里粘贴看效果" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type="text/javascript">
var btns = document.querySelector('.btn');
var clipboard = new Clipboard(btns);
clipboard.on('success', ()=> {
alert('剪切成功！');
});
clipboard.on('error', ()=> {
console.log('剪切失败！');
});
</script>
</body>
</html>以上就是js中clipboard.js插件中复制到剪切板的的使用方法，大家可以参考。