js复制到剪贴板
前端开发工作中，有时候需要有复制文本内容或者剪切文本内容这个需求，以前都是js和flash结合的方式实现效果，随着HTML5的登场flash已经落伍了，js和flash结合实现js复制到剪贴板效果不适用，推荐使用clipboard.js插件实现纯js复制或者剪切到剪贴板效果。
1.js复制到剪贴板，看下面例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js复制到剪贴板 </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>js剪切到剪贴板</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>
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/js/212.html
原文地址：https://tangjiusheng.cn/js/212.html