作者: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方法,因此请根据实际情况进行兼容性处理。
*请认真填写需求信息,我们会在24小时内与您取得联系。