js 实现复制粘贴
Posted -mrl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 实现复制粘贴相关的知识,希望对你有一定的参考价值。
js 实现复制粘贴
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>点击复制内容移动端全兼容(专治各种移动端浏览器)</title> <style> *{ margin:0; padding:0; } body{ background: #fff; } button{ width:100px; height:45px; } </style> </head> <body> <button id="copy">点击复制</button> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> /** * [点击复制内容移动端全兼容(专治各种移动端浏览器)] * @author majiang by beijing * @createtime 2018-11-17 * @blog http://www.love85g.com */ ;(function($) { var defaults = { imgUrl: "", text: "复制成功", copyUrl: "", tipTime: 2000, copyId: "" }; $.extend({ copy: function(option) { var options = $.extend({}, defaults, option); var URL = options.copyUrl == "" ? window.location.href.split(‘#‘)[0] : options.copyUrl; var cId = options.copyId == "" ? ‘#copy‘ : options.copyId; var IMG = options.imgUrl == "" ? "" : ‘<img style="width: 22px;" src="‘ + options.imgUrl + ‘">‘; var tipsHtml = ‘<div id="share-tips" style="position: fixed;top: 50%;left:50%;background: rgba(0,0,0,.5);border-radius: 4px;margin: 0 auto;color: #fff;z-index: 9999;padding: 5px 10px;font-size: 14px;text-align: center;transform: translate(-50%,-50%);">‘ + IMG + ‘<p>‘ + options.text + ‘</p></div>‘; var u = navigator.userAgent; var isandroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; var isios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); var aEle = document.querySelectorAll(cId); if (isAndroid || (!isAndroid && !isiOS)) { $(aEle).each(function() { var index = $(this).attr("id").split("y")[1]; $(‘body‘).append(‘<textarea id="selector‘ + index + ‘" style="position:absolute;top:-9999px;left:-9999px;" readonly>‘ + URL + ‘</textarea>‘); $(this)[0].onclick = function(event) { $("#selector" + index).select(); document.execCommand("copy", false, null); $("body").append(tipsHtml); setTimeout(function() { $("#share-tips").remove() }, options.tipTime) } }) } if (isiOS) { $(aEle).each(function() { var index = $(this).attr("id").split("y")[1]; $(‘body‘).append(‘<a id="selector‘ + index + ‘" style="position:absolute;top:-9999px;left:-9999px;">‘ + URL + ‘</a>‘); this.addEventListener(‘click‘, function() { var copyDOM = document.querySelectorAll(‘#selector‘ + index); var range = document.createRange(); range.selectNode(copyDOM[0]); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand(‘copy‘); $("body").append(tipsHtml); setTimeout(function() { $("#share-tips").remove() }, options.tipTime) }, false) }) } } }) } )(jQuery); </script> <script> $.copy({ imgUrl:"success-tips.png", //分享图标地址 text:"复制成功", //分享提示文案 copyUrl:"复制成功", //自定义复制链接地址 tipTime:2000, //分享提示消失时间 copyId:"#copy"//复制按钮id }); </script> </body> </html>
以上是关于js 实现复制粘贴的主要内容,如果未能解决你的问题,请参考以下文章