首页 > 其他分享 >js实现复制功能

js实现复制功能

时间:2023-03-27 09:56:30浏览次数:40  
标签:function 功能 clipboard text js 复制 alert

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

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()方法提示复制成功。

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

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

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

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

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 

    new ClipboardJS('#copyInput', {
        text: function(trigger) {
            return document.getElementById("myInput").value;
        }
    }).on('success', function(e) {
       alert("复制成功!!!");
       e.clearSelection();
    }).on('error', function(e) {
        alert('Error!');
    });
    

      

 

标签:function,功能,clipboard,text,js,复制,alert
From: https://www.cnblogs.com/PickJackTT/p/17260525.html

相关文章

  • JSON & import assertions All In One
    JSON&importassertionsAllInOneerror//constpackageInfo=require("./package.json");import*aspkgfrom"./package.json";console.log(`pkg`,pkg);......
  • scala的json项目
    有下面的scala代码packagejobsimportorg.json4s._importorg.json4s.jackson.JsonMethods._objectTest{defmain(args:Array[String]):Unit={case......
  • Linux环境下使用jsoncpp
    目录1.下载jsoncpp2.生成静态库libjsoncpp.a3.复制相关文件至/usr/local下(方便编程)4.CMakeList.txt编写(需要新增的)1.下载jsoncpp-->https://github.com/open-so......
  • go语言学习-json和xml
    JSONjson是完全独立于语言的文本格式,是k-v的形式name:zs应用场景:前后端交互,系统间数据交互json使用go语言内置的encoding/json标准库编码json使用json.Marshal()函数可以......
  • 轻松管理笔记,云端实现同步:Ihome主页插件的云笔记功能介绍
    IHome主页插件是一款方便实用的浏览器扩展,可以帮助用户快速访问常用的网站、应用和工具,提高上网效率和使用体验。它可以自定义主页,支持多种主题和布局,同时还提供了各种实用......
  • python3实现阿里云短信发送功能
    #-*-coding:utf-8-*-importuuidimportsysimportjsonimportuuidfromaliyunsdkcore.clientimportAcsClientfromaliyunsdkcore.profileimportregion_pr......
  • Mysql主从复制
    一、主从复制1、主从复制作用主从复制:主设备通过二进制日志传输到从设备,从设备通过二进制日志和主同步数据。作用:负载均衡读操作,备份(实时备份,不能替换手动的备份),高可......
  • 半同步复制
    半同步复制一、半同步复制1、什么是半同步复制所谓的半同步复制就是master每commit一个事务(简单来说就是做一个改变数据的操作),要确保slave接受完主服务器发送的binlog日志......
  • 初入了解——Vue.js
    目录 前言:一.Vue.js介绍二.主要功能三.语言特点易用灵活性能版本记录: Vue3.xVue2.x Vue1.0 Vue0.12 Vue0.11四.运行环境 前言:根据上篇文章来继续了解Vue一.V......
  • Mysql--底层结构、Redolog/Undolog/Binlog详解与区别、通过Binlog恢复数据、主从复制
    一、MySQL底层执行原理详解MySQL的内部组件结构大体来说,MySQL可以分为Server层和存储引擎层两部分。1、Server层主要包括连接器、查询缓存、分析器、优化器、执行器等,涵......