JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法
###
之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的。
就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可以实现,但是面对我自啊table的td中存在多个要实现粘贴复制的话,就会有问题了。
所以,才找了现在这个jqery的另一个插件,相对更好些,能够支持移动端的
###
实现起来也很简单,
我就弄个例子:
<!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>
JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法的更多相关文章
- JS实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
- js 将内容复制到剪贴板
js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...
- clipboard.js -- js实现将文本复制到剪贴板的方法
资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...
- ZeroClipboard 插件实现文本复制到剪贴板
ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...
- js将内容复制到剪贴板
有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...
- 一款给力的一键复制js插件-clipboard.js
一款没有依赖的.给力的一键复制的JS插件 点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- 怎样使用js将文本复制到系统粘贴板中
需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某 ...
- js/jQuery实现复制到剪贴板功能,兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
随机推荐
- idea整合SVN以及SVN的使用
idea整合SVN以及SVN的使用: 1:下载插件: 运行并安装: 安装后的目录: 2-1 打开bin目录 :复制svn.exe的文件路径: 2:打开IDEA的File-->setting: o ...
- TTS与MediaPlayer混合使用
package com.xxx.xxx.Util; import android.content.Context; import android.media.MediaPlayer; import a ...
- 【八】虚拟机工具 01 jps命令详解
JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...
- 【三】Java VM 发展史
1. Sun Classic VM jdk1.0 第一款商用虚拟机. 只能使用纯解释器来运行Java代码.没有自己的判断,会把每一个方法每一行代码都编译,效率不好.导致大家普遍认为Java代码运行 ...
- ****** 四十 ******、软设笔记【网络基础】-Internet和Intranet基础
Internet和Intranet基础 一.网络地址及子网掩码 1.IP地址结构及类别 IP地址是由32位二进制数,即4个字节组成的,由网络号和主机号两个字段组成. 网络号的位数决定了可以分配的网络数 ...
- AD软件使用心得
1.在更新原理图之前一定要标记所有器件,否则无法生成PCB器件. 2.学会用sch list网表来批量修改器件名称 3.布线的面
- 第27月第27天 https
1.验证签名 { [self generateRSAKeyPair:kRSA_KEY_SIZE]; NSData *ttDt = [" dataUsingEncoding:NSASCIISt ...
- JDK开发环境搭建及环境变量配置
Java配置----JDK开发环境搭建及环境变量配置 1. 下载安装安装JDK开发环境 http://www.oracle.com/technetwork/java/javase/downloads/ ...
- 关于SQL的over partition by 开窗语句在分页和统计中的使用总
CREATE TABLE OrderInfo( ID INT IDENTITY(1,1) PRIMARY KEY, CustomerID INT NULL, TotalMoney DECIMAL(18 ...
- Core Mvc传值Query、Form、Cookies、Session、TempData、Cache
1.传值方法 使用Request的方法(1-3): 1)Query:获取链接?后面的值 如:http://localhost:55842/Home/About?name=kxy public IAct ...