iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js复制文本到粘贴板(Clipboard.writeText())
  • 642
分享到

js复制文本到粘贴板(Clipboard.writeText())

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

目录复制文本到粘贴板(Clipboard.writeText())网上的代码clipboard.jsClipboard.writeText()复制内容到剪贴板(无插件,兼容所有浏览器

复制文本到粘贴板(Clipboard.writeText())

js如何复制文本到粘贴板呢,网上所说的各种复制。。在Chrome或者说在我这个项目都没用。

  • windows.copy
  • document.execCommand(“copy”);
  • clipboard.js
  • Clipboard.writeText() ,可行!

网上的代码

通过 document.execCommand('copy') 来操作。

    //创建选中范围
    var range = document.createRange();
    range.selectnode(copyDom);
    //移除剪切板中内容
    window.getSelection().removeAllRanges();
    //添加新的内容到剪切板
    window.getSelection().addRange(range);
    //复制
    var successful = document.execCommand('copy');

通过 window.clipboardData.setData('Text',textVal) 这个 对象来操作的。可是都不work。


$('#btnCopy').bind('click', function (e) {
    if (!$.isEmptyObject(codeData)) {
        //support IE
        var clipboardData = window.clipboardData;
        //support Chrome/Firefox
        if (!clipboardData) {
            clipboardData = e.originalEvent.clipboardData;
        }
        if (!clipboardData) {
            console.log(clipboardData);
            console.log(clipboardData.getData('text'));
            clipboardData.setData('Text', codeData[id]);
        }
        if(window != undefined){
           window.copy($("#genCodeArea").val());
        }
    }
});

clipboard.js

拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的,它不应该依赖flash或者其他框架,应该保持简洁,clipboard.js

1.通过cdn引入

<script src="//cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>

2.使用功能

<!-- Target -->
<input id="copyArea" value="https://zhengkai.blog.csdn.net">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#copyArea">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

3.查看效果

在这里插入图片描述

4.这个功能正常是可以的,但是可能我用了CodeMirror或者其他js导致冲突。

Clipboard.writeText()

以下场景是来自CodeGenerator的复制功能:

$('#btnCopy').on('click', function(){
     if(!$.isEmptyObject(genCodeArea.getValue())&&!$.isEmptyObject(navigator)&&!$.isEmptyObject(navigator.clipboard)){
         navigator.clipboard.writeText(genCodeArea.getValue());
         layer.msg("复制成功");
     }
 });

来源Https://developer.mozilla.org/en-US/docs/WEB/api/Clipboard/writeText

兼容性:Chrome66以上/Firefox63以上

在这里插入图片描述

效果展示

在这里插入图片描述

复制内容到剪贴板(无插件,兼容所有浏览器)

html部分:

<button onclick="copyToClip('内容')"> Copy </button>

JS部分:


function copyToClip(content, message) {
    var aux = document.createElement("input"); 
    aux.setAttribute("value", content); 
    document.body.appendChild(aux); 
    aux.select();
    document.execCommand("copy"); 
    document.body.removeChild(aux);
    if (message == null) {
        alert("复制成功");
    } else{
        alert(message);
    }
}

【补充】

 如果你想复制多行数据的话,可以采用如下方法。


function copyToClip(contentArray, message) {
    var contents = "";
    for (var i = 0; i < contentArray.length; i++) {
        contents += contentArray[i] + "\n";
    }
    const textarea = document.createElement('textarea');
    textarea.value = contents;
    document.body.appendChild(textarea);
    textarea.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
    }
    document.body.removeChild(textarea);
    if (message == null) {
        alert("复制成功");
    } else{
        alert(message);
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: js复制文本到粘贴板(Clipboard.writeText())

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

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

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

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

下载Word文档
猜你喜欢
  • js复制文本到粘贴板(Clipboard.writeText())
    目录复制文本到粘贴板(Clipboard.writeText())网上的代码clipboard.jsClipboard.writeText()复制内容到剪贴板(无插件,兼容所有浏览器...
    99+
    2024-04-02
  • Webjs实现复制文本到粘贴板
    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一、简述 记--简单用js实现将元素的文本内容复制到粘贴板。 二、效果 三、代码 <...
    99+
    2024-04-02
  • vue实现点击复制到粘贴板
    本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyTex...
    99+
    2024-04-02
  • jQuery如何实现复制到粘贴板功能
    这篇文章主要为大家展示了“jQuery如何实现复制到粘贴板功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现复制到粘贴板功能”这篇文章吧。用...
    99+
    2024-04-02
  • JS代码如何实现粘贴板复制功能
    这篇文章将为大家详细讲解有关JS代码如何实现粘贴板复制功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用剪贴板是一项基本技能。作为码农都应知道, Tab , Ctrl...
    99+
    2024-04-02
  • 使用Office剪贴板进行复制和粘贴
    使用Office剪贴板进行复制和粘贴可以帮助提高您在Office程序中的工作效率。以下是使用剪贴板进行复制和粘贴的步骤:1. 打开要...
    99+
    2023-09-13
    Office
  • js 剪切、复制、粘贴功能实现
    针对现代浏览器实现(Navigator.clipboard) Navigator.clipboard API可以用来访问系统剪贴板,可以实现【剪切、复制、粘贴】功能。该 API 被设...
    99+
    2023-05-18
    js 剪切 js复制 js粘贴
  • 关于pycharm中缩进、粘贴复制等文本
    有可能是同时安装了vim,冲突导致: 在seetings中点击Plugins,搜索vim卸载后功能恢复   ...
    99+
    2023-01-31
    文本 pycharm
  • python怎么复制粘贴文件
    在Python中,可以使用shutil模块中的copy函数来复制文件,如下所示:```pythonimport shutilsrc ...
    99+
    2023-08-30
    python
  • 无法从Excel复制并粘贴到Access
    如果你无法将Excel中的数据复制并粘贴到Access中,可能有几个原因:1. 格式不兼容:确保你尝试复制的数据与Access中的目...
    99+
    2023-09-14
    Excel
  • windows caj文件如何复制粘贴
    今天小编给大家分享一下windows caj文件如何复制粘贴的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。caj文件复制粘贴...
    99+
    2023-07-04
  • JS如何实现复制内容到剪贴板功能
    这篇文章主要为大家展示了“JS如何实现复制内容到剪贴板功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现复制内容到剪贴板功能”这篇文章吧。前记:本来...
    99+
    2024-04-02
  • vmware和主机间复制粘贴文件、文字
    apt安装open-vm-tools(最简单) sudo apt-get autoremove open-vm-tools sudo apt-get install open-vm-tools sudo apt-get install op...
    99+
    2023-10-25
    服务器 linux 运维
  • Android应用中怎么将文本内容复制到系统剪贴板
    Android应用中怎么将文本内容复制到系统剪贴板?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。布局文件activity_copy.xml代码如下:<&#63;x...
    99+
    2023-05-31
    roi android
  • js默认文本框粘贴事件怎么实现
    本文小编为大家详细介绍“js默认文本框粘贴事件怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“js默认文本框粘贴事件怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。先上代码  &...
    99+
    2023-07-05
  • 怎么在Android和Windows平台之间复制和粘贴文本
    本文小编为大家详细介绍“怎么在Android和Windows平台之间复制和粘贴文本”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么在Android和Windows平台之间复制和粘贴文本”文章能帮助大家解...
    99+
    2023-04-29
    android windows
  • mac复制粘贴文件的方法是什么
    在Mac上复制和粘贴文件的方法有以下几种:1. 使用鼠标和键盘:- 选择要复制的文件,按住 Command 键不放,然后点击文件并拖...
    99+
    2023-09-28
    mac
  • word文档无法复制粘贴如何解决
    如果Word文档无法复制粘贴,可以尝试以下解决方法:1. 检查剪贴板功能是否正常:打开其他程序(如记事本)尝试复制粘贴功能,如果在其...
    99+
    2023-10-07
    word
  • word文档复制粘贴不了怎么解决
    如果无法复制和粘贴Word文档,可以尝试以下解决方法:1. 检查剪贴板:确保剪贴板没有被其他程序占用。关闭其他程序中可能使用了剪贴板...
    99+
    2023-09-16
    Word
  • VB.NET如何复制读取音频文件到剪贴板
    小编给大家分享一下VB.NET如何复制读取音频文件到剪贴板,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!示例代码Public Class Form1  'VB.Net复制读取...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作