有时候我们点击按钮,要将一些内容复制到剪贴板,大家是怎么实现的呢?
针对3种情况 , 实现点击按钮实现复制到剪贴板
<body>
<input type="text" value="123456" id="textInput">
<button onclick="copyInput()">copybutton>
body>
<script>
function copyInput() {
const input = document.getElementById("textInput");
input.select(); //选中该输入框
document.execCommand('copy'); //复制该文本
}
script>
<body>
<button onclick="copy(123456)">Copybutton>
body>
<script>
function copy(val) {
const input = document.createElement("input"); //创建input
input.setAttribute("value", val); //把input设置value
document.body.appendChild(input); //添加这个dom对象
input.select(); //选中该输入框
document.execCommand("copy"); //复制该文本
document.body.removeChild(input); //移除输入框
}
script>
非表单元素, 我们没办法选中,所以需要其他方法
<body>
<div id="box">123456div>
<button onclick="copyDiv()">button>
body>
<script>
function copyDiv() {
var range = document.createRange();
range.selectNode(document.getElementById('box'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
script>