js实现复制功能

可以使用以下代码实现复制功能:

1 function copyText() {
2   var copyText = document.getElementById("myText");
3   copyText.select();
4   document.execCommand("copy");
5   alert("Text copied to clipboard.");
6 }

其中,myText 是要复制的文本框的 id,这里使用 getElementById() 方法获取了文本框的引用。然后使用 select() 方法选中文本,使用 execCommand('copy') 方法将选中的文本复制到剪贴板中。最后使用 alert()方法提示复制成功。

你可以将这个功能与一个按钮绑定,例如:

1
2
<input type="text" id="myText" value="Hello World!">
<button onclick="copyText()">Copy text</button>

这里将这个按钮的点击事件与 copyText() 函数绑定,点击按钮后即可触发复制功能。

还有一种方式是使用 Clipboard API,它支持复制、粘贴和剪切文本、HTML 和文件等内容。示例代码如下:

1
2
3
4
5
6
7
8
9
10
function copyText() {
  var text = document.getElementById("myText").value;
  navigator.clipboard.writeText(text)
    .then(function() {
      alert("Text copied to clipboard.");
    })
    .catch(function(error) {
      console.error('Failed to copy text: ', error);
    });
}

它的用法与前面的方法类似,只不过使用了 navigator.clipboard.writeText() 方法将文本写入剪贴板,然后可以通过 .then() 方法在成功写入后弹出提示,或者在出现错误时使用 .catch() 方法输出错误信息。

需要注意的是,这种方式需要在 HTTPS 协议下才能使用。如果在 HTTP 协议下使用,需要用户手动授权才能进行剪贴板操作。

或者使用第三方库 clipboard.js

  • clipboard.js 官网:https://clipboardjs.com/

  • clipboard.js Github:https://github.com/zenorocha/clipboard.js 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    new ClipboardJS('#copyInput', {
        text: function(trigger) {
            return document.getElementById("myInput").value;
        }
    }).on('success', function(e) {
       alert("复制成功!!!");
       e.clearSelection();
    }).on('error', function(e) {
        alert('Error!');
    });

      

 

posted @   对白'  阅读(1702)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示