JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

###

之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的。

就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可以实现,但是面对我自啊table的td中存在多个要实现粘贴复制的话,就会有问题了。

所以,才找了现在这个jqery的另一个插件,相对更好些,能够支持移动端的

###

插件官网:https://clipboardjs.com/

实现起来也很简单,

我就弄个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard(‘.btn‘);

    clipboard.on(‘success‘, function(e) {
        console.log(e);
    });

    clipboard.on(‘error‘, function(e) {
        console.log(e);
    });
    </script>
</body>
</html>
时间: 2024-07-28 21:00:46

JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法的相关文章

js实现将文本复制到剪贴板的现代方法

资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zenorocha/clipboard.js/ 基本用法解答 1.data-clipboard-target  在触发器元素中添加属性来实现 new ClipboardJS('.btn') <input id="foo" value="我是被copy的值"> <

Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js. 在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示repo的HTTPS克隆地址,当你点击紧挨着这个部件的按钮时,就会复制当前repo的URL到用户的剪贴板中.Github用JavaScript库ZeroClipboard来实现这一功能,问题是这个库是用一个不可见的Flash来完成剪贴操作,而Flash技术正被各大浏览器厂商冷落,所以势必要有一个新的方案.

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('请手动复制!')

浏览器里点击复制到剪贴板的小方法

今天分享一个在浏览器里点击复制到剪贴板的小方法,经测试所有浏览器都没有兼容性问题,包括安卓和iOS,拿走不谢! 类似于这种需求: 现成的代码: function copy() {    const input = document.createElement('input');    input.value = '想要复制的内容';    document.body.appendChild(input);    input.select();    if (document.execComman

vue中使用剪切板插件 clipboard.js

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮, <p id="share-code">{{init.code}}</p> <button class="copy-btn" data-clipboa

JS实现各种复制到剪贴板

一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

JS 将字符串复制到剪贴板

const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? docume

Clipboard.js实现复制

Clipboard.js实现文本复制或者剪切到剪切板 引用js文件 <script type="text/javascript" src="./dist/clipboard.min.js"></script> 使用一 <!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"

clipboard.js存在的问题

clipboard.js  是一个复制到剪贴板的库. github:https://github.com/zenorocha/clipboard.js 兼容性:IE9一下不支持. 再做微信端的项目接到了一个需求.点击按钮把指定的内容复制到剪贴板中. 刚开始用的是:document.execCommand("Copy"); 大部分的属性只有IE支持.比如:贴贴. 想了想我只用复制而且用的是微信端.只要安卓和苹果支持能够使用就可以了. <input type="text&q