JavaScript实现复制内容到粘贴板代码
2019/6/27 22:29:46
本文主要是介绍JavaScript实现复制内容到粘贴板代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里。下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中。
具体代码如下所示:
function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // can just use the original source element for the selection and copy target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // must use a temporary form element for the selection and copy 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; } // select the content var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch(e) { succeed = false; } // restore original focus if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // restore prior selection elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // clear temporary content target.textContent = ""; } return succeed; }
我们可以这样直接调用这个方法:
copyToClipboard(document.getElementById("name"));
这样id为name的值进入了粘贴板了。
关于JavaScript实现复制内容到粘贴板代码小编就给大家介绍到这里,希望对大家有所帮助!
这篇关于JavaScript实现复制内容到粘贴板代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Vue3项目实战:新手入门与初级技巧指南
- 2024-11-02Vue3教程:新手入门到实战项目
- 2024-11-02VueRouter4教程:新手入门指南
- 2024-11-02Vuex4项目实战:从入门到上手
- 2024-11-02在React中用Splide实现无限循环自动播放的轮播图组件
- 2024-11-02我用React打造了一个超炫的聊天App??
- 2024-11-02Vue3项目实战:新手入门与初级开发者指南
- 2024-11-02Vue3项目实战:从零开始构建你的第一个Vue3应用
- 2024-11-02VueRouter4项目实战:新手入门教程
- 2024-11-02Vue3入门教程:从零开始构建你的第一个Vue3应用