js实现复制到剪切板

搜罗到两种兼容性还不错的方式。

1、第一种,通过clipboard.js插件实现(推荐)

此插件封装了很多种使用方式很方便,具体demo,可以去GitHub上看,clipboard传送门

2、第二种,纯js实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CopyDemo</title>
</head>
<body>
    <div id=NewsToolBox></div>
    <div id="text-content">
        <p>测试p1</p>
        <p>测试p2</p>
    </div>
    <button id="copy-text-btn">复制</button>
</body>
</html>
<script type="text/javascript">
    // 复制全文
    document.getElementById("copy-text-btn").onclick=function(){
        var ssrsss =document.getElementById("text-content").innerText.replace(/\ +/g, ""); //获取文本并去掉空格
            var flag = copyText(ssrsss); //传递文本
            alert(flag ? ‘复制成功‘ : ‘复制失败‘)
        };

        function copyText(text) {
            var textarea = document.createElement("textarea"); //创建input对象
            var currentFocus = document.activeElement; //当前获得焦点的元素
            var toolBoxwrap = document.getElementById(‘NewsToolBox‘); //将文本框插入到NewsToolBox这个之后
            toolBoxwrap.appendChild(textarea); //添加元素
            textarea.value = text;
            textarea.focus();
            if (textarea.setSelectionRange) {
                textarea.setSelectionRange(0, textarea.value.length); //获取光标起始位置到结束位置
            } else {
                textarea.select();
            }
            try {
                var flag = document.execCommand("copy"); //执行复制
            } catch (eo) {
                var flag = false;
            }
            toolBoxwrap.removeChild(textarea); //删除元素
            currentFocus.focus();
            return flag;
        }
    </script>

上面两种方式兼容性都不错,亲测可用。

原文地址:https://www.cnblogs.com/bookobe/p/11298115.html

时间: 2024-10-07 12:48:27

js实现复制到剪切板的相关文章

clipboard.js实现复制到剪切板

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <main class="wrap"> <div id="example-text" class="example"> <div data-clipbo

[JavaScript] js 复制到剪切板

zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件. 首先页面中载入ZeroClipboard.js ZeroClipboard.setMoviePath( “ZeroClipboard.swf路径” );来指定ZeroClipboard.swf 的地址. demo: <!DOCTYPE html> <html

jquery实现点击复制到剪切板

1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> 2.js实现点击复制的代码 <script type="text/jav

jQuery实现复制到剪切板

前段时间需要做一个点击一个按钮,把制定内容复制到剪切板的效果. 对于IE浏览器而言,有一简单的方法,通过 window.clipboardData: (假如有一个id为copy的按钮,有一个id为name的输入框,“text”为固定格式) $("#copy").click(function () { window.clipboardData.setData("text", $("#name").val()); alert("已复制到剪贴

将内容复制到剪切板兼容主流浏览器的解决方案

html : <body> <div class="demo-area"> <label for="copy-input">输入要复制到剪切板的文字:</label><br> <textarea id="copy-input" cols="30" rows="10"></textarea><br> <but

jquery+flash(zclip)实现点击复制到剪切板

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得电脑安装Adobe Flash Player. 加载jQuery和zClip,地址请根据各自的存放地址做相应修改. <script type="text/javascript" src="js/jquery.js"></script> <script typ

前端常用:复制到剪切板和下载

概述 前端有 2 个常用的功能函数,其中一个是复制到剪切板,另一个是下载.我总结了一下它们的实现,记录下来,供以后开发时参考,相信对其他人也有用. 复制到剪切板 需要先安装 clipboard.js 库,然后代码如下: import ClipboardJS from 'clipboard'; function copyToClipboard(text) { if (!ClipboardJS.isSupported()) { return Promise.reject(new Error('not

复制到剪切板 兼容(IE/FF/Chrome/..)

最近做一个复制到剪切板的功能   在网上找了很多都不好用 最后发现在了  这篇文章很不错  简洁好用   贴出来  希望能帮到更多人 原文地址:http://www.lsproc.com/wiki/snippets:copytoclipboard 此代码修改自 discuz!, 简易实现 <script> var clipboardswfdata; var setcopy_gettext = function(){ clipboardswfdata = document.getElementB

iOS社交分享Twitter、Facebook、复制到剪切板、LINE、及邮件

准备 首先要引进如下三个framework: MessageUI.framework Social.framework Accounts.framework 并在实现这几个方法的地方引入以下几个头文件 #import <MessageUI/MFMailComposeViewController.h> #import <Social/Social.h> #import <Accounts/Accounts.h> Twitter及Facebook 其中urlStr为我分享的