广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS实现一键复制
  • 781
分享到

JS实现一键复制

2024-04-02 19:04:59 781人浏览 泡泡鱼
摘要

原生js实现点击按钮复制文本,供大家参考,具体内容如下 最近遇到一个需求,需要点击按钮,复制 聊天记录的文本到剪切板 一、原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容

原生js实现点击按钮复制文本,供大家参考,具体内容如下

最近遇到一个需求,需要点击按钮,复制 聊天记录的文本到剪切板

一、原理分析

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

document.execCommand("copy")

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

但是 select() 方法只对 和 有效,对于就不好使

最后我的解决方案是,在页面中添加一个 ,然后把它隐藏掉点击按钮的时候,先把 的 value 改为的 innerText,然后复制 中的内容

二、代码实现

<style type="text/CSS">
   .wrapper {position: relative;}
   #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>

<div class="wrapper">
   <p id="text">我把你当兄弟你却想着复制我?</p>
   <textarea id="input">这是幕后黑手</textarea>
   <button onclick="copyText()">copy</button>
</div>
<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("复制成功");
    }
    //或者
    function copyText(value) {
        // 创建元素用于复制
        var aux = document.createElement("input");

        // 设置元素内容
        aux.setAttribute("value", value);

        // 将元素插入页面进行调用
        document.body.appendChild(aux);

        // 复制内容
        aux.select();

        // 将内容复制到剪贴板
        document.execCommand("copy");

        // 删除创建元素
        document.body.removeChild(aux);

        //提示
        alert("复制内容成功:" + aux.value);
    }
  </script>

三、一键复制

分享一个自己工作中用到的一键复制方法


copy (id, attr) {
    let target = null;

    if (attr) {
        target = document.createElement('div');
        target.id = 'tempTarget';
        target.style.opacity = '0';
        if (id) {
            let curnode = document.querySelector('#' + id);
            target.innerText = curNode[attr];
        } else {
            target.innerText = attr;
        }
        document.body.appendChild(target);
    } else {
        target = document.querySelector('#' + id);
    }

    try {
        let range = document.createRange();
        range.selectNode(target);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        console.log('复制成功')
    } catch (e) {
        console.log('复制失败')
    }

    if (attr) {
        // remove temp target
        target.parentElement.removeChild(target);
    }
}

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JS实现一键复制

本文链接: https://www.lsjlt.com/news/153203.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS实现一键复制
    原生js实现点击按钮复制文本,供大家参考,具体内容如下 最近遇到一个需求,需要点击按钮,复制 聊天记录的文本到剪切板 一、原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容...
    99+
    2022-11-13
  • js如何实现一键复制功能
    这篇文章主要介绍了js如何实现一键复制功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。项目描述:最近做一个移动端活动页面,用户抽奖后会生成...
    99+
    2022-10-19
  • js实现一键换肤效果
    本文实例为大家分享了js实现一键换肤效果的具体代码,供大家参考,具体内容如下 方法1 <!DOCTYPE html> <html lang="en"> &l...
    99+
    2022-11-13
  • JavaScript实现一键复制内容剪贴板
    目录引言代码实现效果引言 有时候为了方便用户快速复制页面的内容,一般的做法就是添加一个按钮给用户点击一下就复制下来了,这边使用JavaScript原生的方法进行设置剪贴板。 代码 c...
    99+
    2022-11-13
  • 使用VUE实现一键复制内容功能
    接到一个需要,需要在pc端实现一键复制粘贴功能,如图所示: 当我点击复制按钮时,会提示“复制成功”,这样复制的内容就可以在其他地方使用了 具体实现方法如下:...
    99+
    2023-05-17
    VUE 复制 VUE 实现复制
  • JavaScript怎么实现一键复制文本功能
    这篇文章主要介绍了JavaScript怎么实现一键复制文本功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript怎么实现一键复制文本功能文章都会有所收获,下面我们一起来看看吧。一、navigat...
    99+
    2023-07-05
  • 微信小程序实现文字长按复制、一键复制功能
    一、不引入外部组件的实现方式 ...
    99+
    2023-09-09
    微信小程序 小程序 前端
  • 使用js实现复制功能
    本文实例为大家分享了使用js实现复制功能的具体代码,供大家参考,具体内容如下 复制 1.遍历复制(for in) 特征:不修改引用关系(原来的属性还在),仅能复制字符属性,Symbo...
    99+
    2022-11-13
  • js中如何复制一个数组(浅复制、深复制)
    目录下面介绍数组的浅复制方法一:concat()方法二:slice()方法三:扩展运算符方法四: Object.assign()下面是深复制方法一:JSON.parse(J...
    99+
    2023-05-15
    js复制数组 js浅复制 js深复制
  • 微信小程序如何实现文字长按复制与一键复制功能
    本篇内容介绍了“微信小程序如何实现文字长按复制与一键复制功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、不引入外部组件的实现方式&nb...
    99+
    2023-07-05
  • JavaScript实现一键复制文本功能的示例代码
    目录一、navigator.clipboard 对象1. navigator.clipboard 方法汇总2. 代码示例3. 优缺点二、document.execCommand() ...
    99+
    2023-03-21
    JavaScript一键复制文本功能 JavaScript复制文本功能 JavaScript复制文本
  • 微信小程序实现文字长按复制与一键复制功能全过程
    目录一、不引入外部组件的实现方式二、引入外部组件的实现方式总结一、不引入外部组件的实现方式 <!-- index.wxml --> <view> <...
    99+
    2023-03-19
    微信小程序长按复制文本 怎样复制小程序中的文字 微信小程序 一键复制文字
  • js中怎么复制一个数组
    这篇“js中怎么复制一个数组”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么复制一个数组”文章吧。在js中,我们经常...
    99+
    2023-07-06
  • js怎么复制数组一部分
    本篇内容介绍了“js怎么复制数组一部分”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!当我们想要复制数组之间...
    99+
    2022-10-19
  • js 剪切、复制、粘贴功能实现
    针对现代浏览器实现(Navigator.clipboard) Navigator.clipboard API可以用来访问系统剪贴板,可以实现【剪切、复制、粘贴】功能。该 API 被设...
    99+
    2023-05-18
    js 剪切 js复制 js粘贴
  • 一键实现MySQL5.6.16二进制源码安装
    本篇文章给大家主要讲的是关于一键实现MySQL5.6.16二进制源码安装的内容,感兴趣的话就一起来看看这篇文章吧,相信看完一键实现MySQL5.6.16二进制源码安装对大家多少有点参考价值吧。一、系统环境1...
    99+
    2022-10-18
  • js如何多次复制一个字符串
    小编给大家分享一下js如何多次复制一个字符串,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如何多次复制一个字符串JS 字符串允许简单的重复,与纯手工复制字符串不同...
    99+
    2023-06-27
  • Html如何实现禁止右键复制功能
    这篇文章主要介绍Html如何实现禁止右键复制功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!禁止右键菜单<body oncontextmenu=self.event...
    99+
    2022-10-19
  • JS代码如何实现粘贴板复制功能
    这篇文章将为大家详细讲解有关JS代码如何实现粘贴板复制功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用剪贴板是一项基本技能。作为码农都应知道, Tab , Ctrl...
    99+
    2022-10-19
  • p5.js如何实现键盘交互
    这篇文章主要介绍p5.js如何实现键盘交互,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、键盘交互相关关键词与函数keyIsPressed: 关键词,按下按键时为true,反之为f...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作