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

 更新时间:2022年07月01日 15:34:10   作者:Moshow郑锴  
这篇文章主要介绍了js复制文本到粘贴板(Clipboard.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部分:

/**
 * 复制单行内容到粘贴板
 * content : 需要复制的内容
 * message : 复制完后的提示,不传则默认提示"复制成功"
 */
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);
    }
}

【补充】

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

/**
 * 复制多行内容到粘贴板
 * contentArray: 需要复制的内容(传一个字符串数组)
 * 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);
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决layui轮播图有数据不显示的情况

    解决layui轮播图有数据不显示的情况

    今天小编就为大家分享一篇解决layui轮播图有数据不显示的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript Array.flat()函数用法解析

    JavaScript Array.flat()函数用法解析

    这篇文章主要介绍了JavaScript Array.flat()函数用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • js实现拖拽与碰撞检测

    js实现拖拽与碰撞检测

    这篇文章主要为大家详细介绍了js实现拖拽与碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS可视化学习向量计算点到线段的距离并展示

    JS可视化学习向量计算点到线段的距离并展示

    这篇文章主要为大家介绍了JS可视化学习向量计算点到线段的距离并展示实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • js实现4个方向滚动的球

    js实现4个方向滚动的球

    本文主要介绍了js实现4个方向滚动球的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 基于redis的小程序登录实现方法流程分析

    基于redis的小程序登录实现方法流程分析

    这篇文章主要介绍了基于redis的小程序登录实现流程分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JS上传图片预览插件制作(兼容到IE6)

    JS上传图片预览插件制作(兼容到IE6)

    这篇文章主要介绍了JS上传图片预览插件制作(兼容到IE6)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • JavaScript内存泄漏的处理方式

    JavaScript内存泄漏的处理方式

    这篇文章主要介绍了JavaScript内存泄漏的处理方式,通过理论和实例结合的方式让你理解的更加透彻。
    2017-11-11
  • TinyMCE提交AjaxForm获取不到数据的解决方法

    TinyMCE提交AjaxForm获取不到数据的解决方法

    这篇文章主要介绍了TinyMCE提交AjaxForm获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信公众号网页分享功能开发的示例代码

    微信公众号网页分享功能开发的示例代码

    这篇文章主要介绍了微信公众号网页分享功能开发的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论