js/jquery常用方法------复制粘贴至剪切板

1.添加引用

<script src="/XX/XX/clipboard.min.js"></script>

(自己在网上下载)

2.复制按钮

<button class="btn btn-info" type="button" id="btnCopy" title="复制" data-clipboard-action="copy" data-clipboard-target="#ShortURL">
  复制
</button>

(加粗部分属性是必须的)

<table id="table_list"></table>

(此处我想操作复制的内容针对表格,这里的表格我用的jqgrid)

3.复制内容承载的文本域

<textarea id="ShortURL" name="ShortURL" placeholder="" readonly="" style="width:1px;height:1px;position:absolute;top:0;left:-100px;"></textarea>

4.jquery部分

var clipboard = new Clipboard(‘#btnCopy‘);
clipboard.on(‘success‘, function () {
  parent.layer.alert("内容已复制到剪贴板!");
});
clipboard.on(‘error‘, function () {
  parent.layer.alert("XXX!");
});

$("#btnCopy").click(function () {
  var value = [];
  var data = JucheapGrid.GetAllSelected("table_list");
  for (var i = 0; i < data.Data.length; i++) {
    var id = data.Data[i];
    var d = $(‘#table_list‘).jqGrid("getRowData", id);
    value.push(d.Title);
    value.push(d.Content);
  }
  var text = value.join("\n");
  $("#ShortURL").val(text);
});

(内容的话可以根据自己需要写,我这里主要是针对表格)

原文地址:https://www.cnblogs.com/LiCoco/p/9641925.html

时间: 2024-10-24 12:30:47

js/jquery常用方法------复制粘贴至剪切板的相关文章

浏览器点击复制粘贴到剪切板的解决

最近在做一个东西,需要的是复制文本里的内容 稍微研究了下关于H5的复制粘贴到剪切板的api,感觉兼容不尽人意 要么就是浏览器之间,要么就是方法需要支持https才可以,寻找了很久才找到一个符合我期许的一个插件clipboard.js 使用方法也是比较简单,直接引入js就可以使用,非常的方便快捷 1 <script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.

记录使用clipboard.js实现点击复制链接到剪切板的历程

记录使用clipboard.js实现点击复制链接到剪切板的历程 前几天接到一个任务,让实现当用户在首页点击按钮(说是按钮,只是外观是按钮,其实是一个a标签)时弹出弹窗告诉用户已经复制了活动链接,同时将链接复制到用户的剪切板中. 听起来贼简单的功能,分任务的时候甚至有人说就1,2行代码就搞定了.于是这简单的任务就给了我(菜鸟实习生  =-=),我真是信了你的邪~~!. 在我做的时候,才发现,听起来挺简单的任务,但是如果要实现对不同浏览器兼容,其实并不简单. 列举一下我找到的各种实现方法吧: 1.d

zclip 复制内容到剪切板

直接上代码 </pre><pre code_snippet_id="411566" snippet_file_name="blog_20140630_3_1654861" name="code" class="html"><!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title>

JS下的复制粘贴

IE : 1 <input type="text" id="Settext" /> 2 3 <input type="button" onclick="copyToClipboard()" /> body内 1 function copyToClipboard() { 2 3 if (document.all) { //判断IE 4 5 var text = document.all("Set

C# 复制内容到剪切板

Clipboard.Clear();//清空剪切板内容 Clipboard.SetData(DataFormats.Text, "复制内容");//复制内容到剪切板

JQuery复制内容到剪切板-jquery.zclip.js的使用,在公司项目中

公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不错

js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行粘贴. 案例2:在移动端(android 和 iOS端),用户获得邀请码之后,可以使用一键复制的功能,将邀请码复制到剪切板,然后在app中进行兑换. 使用jQuery中的方法监听用户的剪切.复制.粘贴的行为 $("#cut").on("cut",function(){ al

js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body> <div id="cardList"> <div class="btn">点击我,复制我</div> </div> <script type="text/javascript">

在多浏览器使用JS复制内容到剪切板,无需插件

最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷歌处于安全考虑,不支持调用剪切板.我直接访问了在线的js,拷贝下来,和本地的对比了一下,代码不一样.简单研究了一下在线的js,发现,在线版的js里面有_clip_area,而调试中发现var c = this._clip_area = document.createElement("textarea