JS实现复制到剪贴板功能

原创于 2021-11-12 11:13:26 发布 · 887 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Javascript & Jquery 专栏收录该内容

19 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript的select()方法和document.execCommand('Copy')来实现在网页上选中输入框文本并复制到剪贴板的功能。这种方法适用于没有disabled或hidden属性，且尺寸不为0的<input>和<textarea>元素。如果复制失败，会提示用户手动复制。这是一个关于前端开发中的小技巧，对于提升用户体验有一定帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS实现

原生JS，先使用 select() 选中输入框文本，然后使用 document.execCommand("Copy")复制到剪贴板

前提条件

select() 方法只对 <input> 和 <textarea> 有效
输入框不能有disabled属性
输入框不能有hidden属性
输入框的 width 和 height 不能为0

实现代码

HTML

<div>
    <input id="copyInput" type="text" value="需要复制的文本" />
</div>

var ele = document.getElementById("copyInput");
ele.select();
let c = document.execCommand("Copy");
if (c) {
    alert("复制链接成功！");
} else {
    alert("复制失败！当前浏览器不支持此功能，请手动复制。");
}