js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令:
//复制内容到粘贴板 function copyToClipboard(elemId) { var target = document.getElementById(elemId); // 选择内容 target.focus(); target.setSelectionRange(0, target.value.length); // 复制内容 var succeed; try { succeed = document.execCommand("copy"); } catch (e) { succeed = false; } console.log("复制成功"); return succeed; }
如果应用场景复杂些,可能有多种元素(textarea、input、div等)需要复制内容,可以写一个通用方法:
//复制内容到粘贴板 function copyToClipboard(elemId) { var elem = document.getElementById(elemId); var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // 复制选择内容 target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // 必须有一个临时的元素存储复制的内容 target = document.getElementById(targetId); if (!target) { var target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetId; document.body.appendChild(target); } target.textContent = elem.textContent; } // 选择内容 var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // 复制内容 var succeed; try { succeed = document.execCommand("copy"); } catch (e) { succeed = false; } // 恢复焦点 if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // 恢复之前的选择 elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // 清除临时内容 target.textContent = ""; } console.log("复制成功"); return succeed; }