JavaScript复制内容到剪切板
复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板。
复制页面元素选中内容
html代码:
Javascript代码:
复制字符串到剪切板
复制字符串采用临时添加一个元素,模拟选中内容进行选中的方式进行复制,复制后移除临时添加的元素即可。
Javascript代码:
复制页面元素选中内容
html代码:
<input type="textarea" id="txt" /> <button onclick="copy()">复制</button>
Javascript代码:
function copy() { var element = document.getElementById("txt"); element.select(); element.setSelectionRange(0, element.value.length); document.execCommand('copy'); alert("已复制到剪切板"); }
复制字符串到剪切板
复制字符串采用临时添加一个元素,模拟选中内容进行选中的方式进行复制,复制后移除临时添加的元素即可。
Javascript代码:
//复制文本 function copyText(text) { var element = createElement(text); element.select(); element.setSelectionRange(0, element.value.length); document.execCommand('copy'); element.remove(); alert("已复制到剪切板"); } //创建临时的输入框元素 function createElement(text) { var isRTL = document.documentElement.getAttribute('dir') === 'rtl'; var element = document.createElement('textarea'); // 防止在ios中产生缩放效果 element.style.fontSize = '12pt'; // 重置盒模型 element.style.border = '0'; element.style.padding = '0'; element.style.margin = '0'; // 将元素移到屏幕外 element.style.position = 'absolute'; element.style[isRTL ? 'right' : 'left'] = '-9999px'; // 移动元素到页面底部 let yPosition = window.pageYOffset || document.documentElement.scrollTop; element.style.top = `${yPosition}px`; //设置元素只读 element.setAttribute('readonly', ''); element.value = text; document.body.appendChild(element); return element; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步