JQ JS复制到剪贴板

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="clipboard.min.js"></script>
    <!-- Target -->
    <textarea id="bar">Mussum ipsum cacilds...</textarea>
    <!-- Trigger -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
        Cut to clipboard
    </button>
    <button class="btn" data-clipboard-text="Just because you can doesn‘t mean you should — clipboard.js">
    Copy to clipboard
</button>
    <script>
    var clipboard = new ClipboardJS(‘.btn‘);
    clipboard.on(‘success‘, function(e) {
        console.info(‘Action:‘, e.action);
        console.info(‘Text:‘, e.text);
        console.info(‘Trigger:‘, e.trigger);

        e.clearSelection();
    });

    clipboard.on(‘error‘, function(e) {
        console.error(‘Action:‘, e.action);
        console.error(‘Trigger:‘, e.trigger);
    });
    </script>

</button>

</body>
</html>

如果不需要任何提示这样就可以了

<button class="btn" data-clipboard-text="这里是复制的文本">
    点击复制
</button>

<script>
    new ClipboardJS(‘.btn‘);
</script>

下载地址:https://github.com/zenorocha/clipboard.js

原文地址:https://www.cnblogs.com/wangzhaobo/p/9047544.html

时间: 2024-10-09 21:31:58

JQ JS复制到剪贴板的相关文章

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

JS实现复制到剪贴板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>复制到剪贴板</title> <script src="http://img3

js插件zClip实现复制到剪贴板功能

之前在一个项目中用过插件,但是最近又要做,发现,出现问题了,根据以往记忆做好,检查了所有问题,还是不出现,元素是绑定了zclip_type这个事件,就是弹出不显示,想了下,查看html结构元素一看,问题发现,覆盖的层定位有问题.相对body定位了,没有相对td定位. 一,准备工作. 准备好jquery,然后去http://www.steamdev.com/zclip/这里下载jquery.zclip.js和ZeroClipboard.swf ,不过那里的ZeroClipboard.swf下载地址

JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋

【转】js实现复制到剪贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

js点击后将文字复制到剪贴板,将图片复制到剪贴板

复制文字: [html] view plaincopy <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color: white;"><s:text name

复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)

相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几乎没有统一的实现这样功能的方案.而被各大程序猿喜欢的jQuery也没有类似的方法或者函数来实现这一功能.包括博客园这样的技术博客区对代码的复制,也没有直接复制到剪贴板,需要用户自己去手动ctrl+c.如下: 对于一般技术类的用户来说这没什么,但是对于那些非技术类的人来说,反而会觉得比较麻烦.因此从实用性和提高用户体验的角度出发,得给用户直接复制粘贴到剪切板的功能.今天介绍一个实

js 将内容复制到剪贴板

js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(window.clipboardData){ // 清空剪贴板 window.clipboardData.clearData(); // 赋值 window.clipboardData.setData("Text", txt); alert('复制成功!') }else{ alert('请手动复制!')

JS pc端和移动端共同实现复制到剪贴板功能实现

JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯JS方法复制文本到剪切板. 插件名是Clipboard.js,该插件不依赖 Flash,而是依赖于最新HTML5推出 Selection API 和 execCommand API. Github:https://github.com/zenorocha/