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

最近在做一个东西,需要的是复制文本里的内容

稍微研究了下关于H5的复制粘贴到剪切板的api,感觉兼容不尽人意

要么就是浏览器之间,要么就是方法需要支持https才可以,寻找了很久才找到一个符合我期许的一个插件clipboard.js

使用方法也是比较简单,直接引入js就可以使用,非常的方便快捷

1 <script type=‘text/javascript‘ src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

然后就是在html加入相对应的属性

<p class="input_copy" data-clipboard-text="" onClick="copy_data()" id="copp">复制开票信息</p>
data-clipboard-text就是要引入的属性,里面的值就是复制到剪切板里面的东西
<script type="text/javascript">
    function copy_data()
    {
        var res_data=‘123213‘;//这里我是要获取很多copy的信息做的处理,没有可以直接用空挡下面获取单行的值
        $("#copp").attr("data-clipboard-text",res_data);
        var clipboard = new Clipboard(‘.input_copy‘).on(‘success‘, function(e) {
            var e = e || window.event;
            alert(‘复制成功‘);
        }).on(‘error‘, function(e) {});
    }
</script>

这样就成功了,ios11,安卓基本上都可以,浏览器google,360极速

暂时就这么多,记录一下

原文地址:https://www.cnblogs.com/scy152417/p/9645952.html

时间: 2024-10-12 08:34:48

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

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

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

简单实现兼容各大浏览器的js复制内容到剪切板

因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js

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

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

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-clipboa

点击复制内容到剪切板(clipboard)

clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.com/zenorocha/clipboard.js/archive/master.zip 使用: 1.从其他组件上复制内容: <!-- Target --> <input id="foo" value="https://github.com/zenorocha/

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>

C# 复制内容到剪切板

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

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">