浏览器中js复制问题

1、直接利用js的execCommand,此方法移动端无效

<input type="text" id="url" readonly class="form-control" name="url" placeholder="Email to:" value="<?= $sharelink ?>">
<button onClick="url.select();document.execCommand(‘Copy‘);alert(‘复制成功‘)" class="btn btn-primary btn-block"><b>复制链接</b></a>

2、引入js插件clipboard.js

<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

&lt;!-- 2. Include library --&gt;
&lt;script src="../dist/clipboard.min.js"&gt;&lt;/script&gt;

&lt;!-- 3. Instantiate clipboard --&gt;
&lt;script&gt;
var clipboard = new ClipboardJS(‘.btn‘);

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

clipboard.on(‘error‘, function(e) {
    console.log(e);
});
&lt;/script&gt;

原文地址:http://blog.51cto.com/13238147/2348757

时间: 2024-08-29 00:02:31

浏览器中js复制问题的相关文章

解决webkit浏览器中js方法中使用window.event提示未定义的问题

这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的形式传入(后文会详说). function myfunc(param){ alert(window.event); } //ie中 <input type="button" onclick="myfunc('testie')" > //一切正常 //webk

简单实现兼容各大浏览器的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复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

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

Clipboard.js : 移动端浏览器实现网页内容复制

.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size: 1em } .bottom-line { border-bottom: 2px solid #009a61; padding-bottom: 8px } 最近在项目中遇到这样一个需求: 点击按钮,将指定的URL复制到剪贴板,然后用户可以粘贴到浏览器(Safari为主)自行打开. 方案一:zero

Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题

首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行查看 双击Tomcat服务,会打开一个窗口,然后点击Open launch configuration,可打开配置窗口,在这里可以查看到具体服务所在位置. 接下来步入正题,正如题目所说,Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载,如图 仔细看下路径,会

【js】IE、FF、Chrome浏览器中的JS差异介绍

如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff 的getBoxObjectFor  opera 的window.opera  safari 的openDatabase  Chrome 的MessageEvent有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧 2

js new Date(&quot;2016-07-01 08:00:00&quot;) 格式在IE内核浏览器中显示NaN的问题

js new Date("2016-07-01 08:00:00") 格式在IE内核浏览器中显示NaN的问题 废话就不多了,var dd = new Date("2016-07-01 08:00:00");这种格式在ff,chrome,opera,safari等浏览器中没有问题的,而在IE内核浏览器(猎豹,360兼容模式)等会出现无效NaN的问题, 查了一下,原来是格式的问题,注意日期的格式,如果将上面的代码修改为var dd = new Date("20

js 在浏览器中的限制

众所周知,由于安全方面的考虑,运行在浏览器中的JS脚本会被存在很多限制,这里做一下小小的归纳: 1.JS不允许访问宿主的计算机: js原本是不能读取或写入用户计算机的文件系统的(cookie除外),但是HTML5新增的file API,能让我们能突破这个限制(但是仍然有其他限制条件,有兴趣的同学可以参考http://www.html5rocks.com/zh/tutorials/file/filesystem/). 2.同源策略: 这个大家应该都知道,就是两个页面的域必须相同,才允许相互通信.