微信号复制跟跳转——execCommand()
时间:2019-10-03
本文章向大家介绍微信号复制跟跳转——execCommand(),主要包括微信号复制跟跳转——execCommand()使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前由于公司的业务需求,需要点击实现微信号复制功能。今天说下js里面document.execCommand()方法实现复制功能。
本次案例实现涉及以下几点:
1.点击打开弹窗关闭弹窗的功能;display:block和display:none的切换
2.H5提供的API-range对象;具体可去《HTML5编辑API之Range对象》查看.
3.document.execCommand()方法使用。具体用法地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
HTML部分
<button onClick='_toolTipOpen()'>打开弹窗</button> <!-- 弹窗内容 --> <div id='_toolTipBox' onClick='_toolTipClose()'></div> <div id='_toolTip'> <div class='_tipText'>加[李四]微信好友</div> <div class='_tipCode '><span id="wechatCode">wechat</span></div> <div class='_tipCopy ' onclick="copywx()">点击复制</div> <a class='_tipOpenAPP' href='weixin://'>打开微信<span>(如无反应,请手动打开)</span></a> <div class='_toolTipClose' style='bottom: 10px;' onClick='_toolTipClose()'>取消</div> </div>
css部分
#_toolTipBox { display:none; width:100%; height:100%; background:rgba(0,0,0,0.4); position:fixed; top:0; left:0; z-index:90; transition:all 0.8s; } #_toolTip { display:none; position:fixed; transition:all 0.5s; line-height:60px; z-index:99; width:90%; text-align:center; margin:auto; left:0; right:0; bottom:10px; font-family:微软雅黑; border-radius:15px; color:#4d9dfe;font-size:16px; } #_toolTip ._tipText { background:#FFF; width:100%; height:60px; line-height:60px; border-bottom:1px solid #D1D1D3; color:#4d9dfe; border-radius:18px 18px 0 0; } #_toolTip ._tipCode { background:#FFF; border-bottom:1px solid #D1D1D3; } #_toolTip ._tipCopy { background:#FFF; border-bottom:1px solid #D1D1D3; cursor:pointer;} #_toolTip ._tipOpenAPP { background:#FFF; display:block; border-radius:0 0 18px 18px; text-decoration:none; color:#4d9dfe;} #_toolTip ._tipOpenAPP span { font-size:14px; color:#888;} #_toolTip ._toolTipClose { background:#FFF; border-radius:18px; margin-top:18px; cursor:pointer;}
js部分
// 微信号复制 function copywx(){ //Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域, //创建一个空的Range对象 const range = document.createRange(); //Range对象的selectNode方法用于将Range对象的起点指定为某个节点的起点,将Range对象的终点指定为该节点的终点, //使Range对象所代表的区域中包含该节点。 range.selectNode(document.getElementById('wechatCode')); //在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域, //(注意:经过测试IE9以下的浏览器不支持Selection对象), //可以通过如下语句创建selection对象; const selection = window.getSelection(); if(selection.rangeCount > 0) { //removeAllRanges()从当前selection对象中移除所有的range对象 selection.removeAllRanges(); //seletion.addRange(range)一个区域(Range)对象将被增加到选区(Selection)当中。 selection.addRange(range); // 拷贝当前选中内容到剪贴板。 document.execCommand('copy'); alert("微信号复制成功!"); }else { alert('微信号复制失败,请手动复制!'); } } /*打开弹窗*/ function _toolTipOpen() { document.getElementById('_toolTipBox').style.display = 'block'; document.getElementById('_toolTip').style.display = 'block'; }; /*关闭弹窗*/ function _toolTipClose() { document.getElementById('_toolTipBox').style.display = 'none'; document.getElementById('_toolTip').style.display = 'none'; }
原文地址:https://www.cnblogs.com/smile-xin/p/11619906.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP使用HTML5 FormData对象提交表单操作示例
- python接入支付宝的实例操作
- php实现网页上一页下一页翻页过程详解
- Yii 使用intervention/image拓展实现图像处理功能
- PHP常用的类封装小结【4个工具类】
- 微信公众号之主动给用户发送消息功能
- laravel异步监控定时调度器实例详解
- python按顺序重命名文件并分类转移到各个文件夹中的实现代码
- Python实现删除某列中含有空值的行的示例代码
- python打开音乐文件的实例方法
- PHP基础之输出缓冲区基本概念、原理分析
- 基于python实现删除指定文件类型
- sync-player:使用websocket实现异地同步播放视频
- CentOS7.0下安装PHP5.6.30服务的教程详解
- PHP实现微信提现功能