h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)
前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决
下载地址:下载地址: https://github.com/zenorocha/clipboard.js
cnd 引入js : https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js
html部分:
<div id="foo">需要被粘贴的内容</div>
<!-- 复制按钮 -->
<a class="copyBtn" href="javascript:" data-clipboard-action="copy" data-clipboard-target="#foo"></a>
js部分:
var clipboard = new Clipboard('.copyBtn').on('success', function(e) {
var e = e || window.event;
console.log('复制成功!!!');
}).on('error', function(e) {});
完整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iOS复制兼容</title>
</head>
<body>
<div id="foo">需要被粘贴的内容</div>
<!-- 复制按钮 -->
<a class="copyBtn" href="javascript:" data-clipboard-action="copy" data-clipboard-target="#foo"></a>
<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
<script>
window.onload = function(){
var clipboard = new Clipboard('.copyBtn').on('success', function(e) {
var e = e || window.event;
console.log('复制成功!!!');
}).on('error', function(e) {});
}
</script>
</body>
</html>
h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)的更多相关文章
- ios微信浏览器click事件不起作用的解决方法
$(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,h ...
- 微信浏览器发送ajax请求执行多次解决方法
http://www.cnblogs.com/whatlonelytear/p/8934738.html
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- Clipboard 自动复制功能,ios复制失败,换方案 user-select: text ;长按复制 (ios 兼容,长按复制)
Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案 user-select: text ;长按复制 (ios ...
- ZeroClipboard跨浏览器复制粘贴
<!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- H5兼容问题及解决方法
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...
- Web前端入门教程之浏览器兼容问题及解决方法
JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...
随机推荐
- Windows下通过VNC远程访问Linux服务器,并实现可视化
前言 最近因部门需要,老大想让我在公司Linux服务器上弄个Oracle,以用作部门测试环境的数据库服务器,经过一番折腾后,成功完成了任务.因公司Linux服务器是无图形界面的,本人接触Linux不多 ...
- 图片去水印工具:Inpaint 7.2中文专业破解版下载及使用方法
下载地址: 点我 Inpaint 是一款可以从图片上去除不必要的物体,让您轻松摆脱照片上的水印.划痕.污渍.标志等瑕疵的实用型软件:简单说来,Inpaint 就是一款强大实用的图片去水印软件,您的图片 ...
- C#使用sqlite-net搭建简易的ORM
SQLite简易版ORM 首先打开项目,使用nuget搜索sqlite-net,如下图: 下载完成后,我们会多出两个文件,SQLite.cs和SQLiteAsync.cs. 我们新建一个文件夹SQLi ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- 在eclipse中利用正则表达式查找替换
众所周知,eclipse是可以用正则表达式来进行查找的,那么怎么利用正则表达式进行替换呢? 方法也很简单,就是在Replace with: 里面输入$来代表捕获型括号的匹配结果,$1为第一个匹配结果, ...
- 通过sparkstreaming分析url的数据
spark version 1.6.2 scala verson 2.10.6 此代码参考官方例子---- 自定义接收器 import java.io.BufferedReader import or ...
- 小白开学Asp.Net Core《三》
小白开学Asp.Net Core<三> ——界面 我胡汉三再次又回来了(距离上篇时间有点长),今天抽时间将最近对框架采用的后台界面做个记录 1.先上图 (图一) (图二) 2.界面说明 后 ...
- C# 不同访问符的访问级别
public----成员可以由任何代码访问. private----成员只能由类中的代码访问(如果没有使用任何关键字,就默认使用这个关键字). internal----成员只能由定义它的项目(程序集) ...
- Web网站工作原理解析
Web的工作原理 Web采用的是客户机--服务器架构(Client--Server model),如下图所示,其中客户端(Client)可以通过网络连接访问另一台计算机的资源或服务,而提供资源或服 ...
- 如何更换织梦cms系统的网站小图标
织梦cms建站现在已经是很普遍的建站方式了,下面小编就分享一个简单的换网站小图标的方法! 一.登录自己网站的后台管理系统.在不修改织梦后台的情况下,默认的url是自己的网站后台dede目录下访问. 二 ...