整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

原生 js 实现点击按钮复制文本

作者:JavaScript前端(梓超)
注:此文章为头条号原创,特此声明!

一、原理分析

浏览器提供了 copy 命令 ,可以复制选中的内容

document.execCommand("copy")

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板

但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使

最后我的解决方案是,在页面中添加一个 <textarea>,然后把它隐藏掉

点击按钮的时候,先把 <textarea> 的 value 改为 <p> 的 innerText,然后复制 <textarea> 中的内容

二、代码实现

HTML 部分

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

JS 部分

 <script type="text/javascript">
 function copyText() {
 var text = document.getElementById("text").innerText;
 var input = document.getElementById("input");
 input.value = text; // 修改文本框的内容
 input.select(); // 选中文本
 document.execCommand("copy"); // 执行浏览器复制命令
 alert("复制成功");
 }
 </script>

亲测,Firefox 48.0,Chrome 60.0,IE 8 都能用

推荐阅读:

最好的JavaScript数据可视化库都在这里了

js 中原型和原型链深入理解

JavaScript基础知识系列:不再彷徨:完全弄懂JavaScript中的this

最好的JavaScript数据可视化库都在这里了

JavaScript基础知识系列:判断类型(上)

ello,大家好,前段时间做舔狗日记小程序,需要一键复制,看了下文档,小程序自带复制功能,那么网页js如何实现复制功能呢?


首先,我查了下,貌似可以实现对input和textarea等文本输入框可以实现选中复制,针对div,p等标签不可以,那么我们需要新建一个文本框标签,不能给display:none; 我们需要怼他进行一个定位,让透明看不见找不到,点击复制,将需要复制的内容赋值给文本框,接着对文本框进行全选,在进行复制操作即可,代码如下:

Markup

<p id="content">前端共享博客-专注前端行业精选- sharedblog.cn</p>
<textarea id="text" style="position: fixed;top: 10000px;left: 10000px;opacity: 0;"></textarea>
<button id="CopyBtn">复制</button>

JavaScript

网页开发中,实现复制功能是一项常见的需求。本文将介绍如何使用JavaScript实现网页上的复制功能,为您揭秘这一实用技巧。

步骤一:创建复制按钮

首先,在HTML文件中创建一个按钮,并设置一个唯一的id,用于后续的处理。

<button id="copyButton">复制文本</button>

步骤二:编写复制函数

接着,在JavaScript中编写复制函数,该函数将实现复制功能。

document.getElementById("copyButton").addEventListener("click", function() {
 // 希望复制的文本内容
 var text = "要复制的文本内容";
 // 创建一个元素
 var input = document.createElement("input");
 input.setAttribute("value", text);
 // 将元素追加到页面中
 document.body.appendChild(input);
 // 选中元素中的文本内容
 input.select();
 // 执行复制操作
 document.execCommand("copy");
 // 移除元素
 document.body.removeChild(input);
 // 显示复制成功提示
 alert("复制成功!");
});

步骤三:测试程序

我们尝试运行程度,然后点击一下复制按钮;

运行结果:

至此,我们已完成了JavaScript实现网页复制功能的所有步骤。

在实际运用中,您可以根据需要对复制功能进行改进,例如添加复制成功的提示、处理异常情况等。通过掌握这一技巧,您可以为用户提供更好的交互体验。

注意:

请在合适的时机将代码部署到实际环境中进行测试。

确保在使用execCommand("copy")方法时,浏览器拦截器或插件不会阻止复制操作。

部分移动设备浏览器可能不支持execCommand方法,因此请根据实际情况进行兼容性处理。