html内容点击按钮自动复制,HTML页面---复制按钮的使用(包含弹层)
先说一下我的整体方案:
用到了clipboard插件,官方地址和github地址,也可以参考中文说明。
clipboard插件实测:在PC端的浏览器(试了mac上的safari,chrome,firefox)可用,iOS 10.3上的safari可用,手机上的微信QQ浏览器能用,安卓手机自带的浏览器以及UC,不可用。所以对不可用的设备,采用弹层,长按手动复制的方法。
这里需要注意一点,当需要获取的 标签 为dispaly:none 的时候data-clipboard-target的方式得不到值,可用data-clipboard-text结合下面的方法。
var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);
代码如下:
复制
.show {
display: block;
}
.hidden {
display: none;
}
#divLayer {
background-color: rgba(204, 204, 204, 0.7);
width: 100%;
height: 100%;
position: fixed; /* 用absolute的话,当页面过长,下面的部分不会覆盖。*/
left: 0px;
top: 0px;
}
#centerLayer {
background-color: white;
margin-top: 150px;
width: 100%;
height: 208px;
text-align: center;
}
function showLayer() {
document.getElementById("divLayer").className="show";
}
function closeLayer() {
document.getElementById("divLayer").className="hidden";
}
hello world!
点击关闭
复制
//dispaly:none 的时候 data-clipboard-target 得不到值,所以通过下面的方法更改。
var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);
var clipboard = new Clipboard('#copy-button');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection(); //清除选择
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
showLayer();
});
html内容点击按钮自动复制,HTML页面---复制按钮的使用(包含弹层)相关推荐
- 微信内置浏览器中实现点击电话号码自动到拨号页面
一般的web处理 1.一键拨号: <a href="tel:10086">马上拨打电话10086</a> 2.发送短信功能: <a href=&quo ...
- js实现复制html页面
js实现复制html页面 复制html <h5>一.单选题请选择</h5><div class="pojo"><h7>1.fajfa ...
- 解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题
解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题 上篇博文中 点击导航栏切换背景色 有一个bug,如果点击第二个或者后面几个按钮,再刷新页面,按钮背景色会跳到第一个按钮上去, ...
- IOS 微信返回按钮事件控制弹层关闭还是返回上一页
在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回"<"按钮,就会跳转回上一页或退出网站,而 ...
- jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析 代码实现 css分析 js分析 代码实现 只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求 为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
- button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据 获取选中数目 验证是否全选 提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
- html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...
- 腾讯微博——点击按钮自动加关注代码
腾讯微博点击按钮自动加关注: <iframe id="previewmc" src="http://follow.v.t.qq.com/index.php?c=fo ...
- Android中实现按钮自动点击
在Android项目中,有时候是利用按钮来更新消息,但是想要自动更新就需要设置按钮自动点击,前面声明和关联按钮控件就不说了 代码如下: button1.performClick(); 也算写项目中学到 ...
最新文章
- Java微框架:不可忽视的新趋势--转载
- 最详细的equals和hashcode详解
- PHPer 面试指南-扩展阅读资源整理
- 【LintCode】算法题 1443. 最长AB子串
- 数据分析师就是个 SQL boy?
- Web应用启动时,后台自动启动一个线程
- 关于hashcode和equals方法
- 《未来编年史》——关于地球未来2000年的预言
- 武林外传之勇夺金掌柜 【安卓游戏】
- vscode工作级别认知与配置
- 蓝牙Profile的概念和常见种类
- input text 限制文本内容
- METIS安装与使用
- 侯捷C++->参数传递与返回值
- html 创建一个正方形,css 如何设置带有正方形项目的列表
- 使用python符号计算微分
- fastadmin控制table操作栏按钮是否显示
- STM32定时器中断实验
- python股票全套系统下载_GitHub - xiangjiaowangzi/stock: stock,股票系统。使用python进行开发。...
- 5年后 又听王菲98-99香港唱游大世界演唱会
热门文章
- Autodesk招聘开发咨询顾问(北京或上海),需要内推的扔简历过来啊
- AgileEAS.NET SOA 中间件平台.Net Socket通信框架-完整应用例子-在线聊天室系统-代码解析...
- linux --常用命令
- Android:SharedPreferences详解+示例
- 面试历程六:人真的有时候很奇怪
- Maven之pom.xml常用标签解析及镜像配置
- 请问,现在android流行什么开源框架?
- oracle设置临时表空间,Oracle临时表空间查看、添加临时表空间数据文件、修改默认临时表空间 方法!...
- cifar10数据集测试有多少张图_pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)...
- 为什么在Python中使用string.join(list)而不是list.join(string)?