手机端,pc端实现点击复制功能,亲测有效
来源:     阅读:854
织梦模板店
发布于 2021-03-20 03:16
查看主页

在项目中经常有点击复制一段内容或者链接的功能,分享下实现方法:

方法一:

利用input,textarea特有的select()方法,该元素不可设置display:none和 visibility: hidden;否则无效,可以设置opacity: 0;或者者利用定位到屏幕之外不可见的地方

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>    <title></title>    <style>        body {            padding: 20px;            text-align: center;        }        .copytxt {            opacity: 0; /*不可以用display:none和 visibility: hidden;*/        }    </style></head><body><a href="javascript:;" onclick="copyUrl()">点我复制</a><input type="text" class="copytxt"/><script>    function copyUrl() {        document.getElementsByClassName("copytxt")[0].value = "https://www.baidu.com";        var url = document.getElementsByClassName("copytxt")[0];        url.select(); // 选择需要复制内容的对象        document.execCommand("Copy"); // 执行浏览器复制命令        alert("复制成功");    }</script></body></html>
缺点:不兼容ios用户端,使用iphone手机复制无效

方法二:利用window对象的getSelection()方法,可兼容pc/ios/Android

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />    <title></title>    <style>        body{            padding: 20px;            text-align: center;        }        .copytxt{            opacity: 0;/*不可以用display:none和 visibility: hidden;*/        }    </style></head><body><a href="javascript:;" onclick="copyUrl()">点我复制</a><span class="copytxt"></span><script>    function copyUrl(){        document.getElementsByClassName("copytxt")[0].innerText = "https://www.baidu.com";        const range = document.createRange();        range.selectNode(document.querySelector(".copytxt"));        const selection = window.getSelection();        if(selection.rangeCount > 0) selection.removeAllRanges();        selection.addRange(range);        document.execCommand('Copy');        alert("复制成功");    }</script></body></html>

原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 软件环境
相关推荐
函数式编程(一)
VR技术是如何在电力安全培训方面应用的?
回味CSS选择器
php-redis拓展安装
Linux任务管理器详情
首页
搜索
订单
购物车
我的