通过原生的JS实现点击复制效果

1 305 2021-04-02 23:28:18

本文目录

1. 点击复制源码
2. 升级版附注

对于网站、app开发等工作而言，复制是一个非常常见的功能。很多人到处找插件希望能完美复制，却不知道其实原生js就可以实现。

通过原生的JS实现点击复制效果

点击复制源码

<!doctype html>
<html>
<head>
    <meta set="utf-8">
    <title>原生js复制到剪贴板</title>
</head>
<body>
    <script type="text/javascript">
        function copyUrl2() {
            var Url2 = document.getElementById("biao1");
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("已复制好，可贴粘。");
        }
    </script>
    <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
</body>
</html>

在这个基础上，我们也可以实现源生JS复制后打开微信、复制后打开浏览器等等，都是没有问题的。

升级版附注

这个复制是可见区域复制，也就是说，必须要是能看到的元素才能复制。而如果不展示出来的元素，则需要更好的解决方案。
我们可以参考这篇：JS点击复制data-*属性，不仅支持复制属性，还支持点击复制当前元素的data-属性，适用于多个元素单独复制的情况。

本文地址：https://xzo.com.cn/develop/js/777.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

复制

点击复制

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

js判断windows操作系统还是mac os系统

js网站视频播放器ckplayer和dplayer优缺点分析

禁止指定城市/省份IP访问JS代码

推荐JS/JQuery开发教程

JS怎样做倒计时效果？ 在各种盛大的节日、活动前，网站制作倒计时特效可有效给活动页引流。那么，怎样...: 1 337

jQuery怎样监听鼠标滚动是向上还是向下的状态？ 知乎鼠标向下滚动显示文章标题，向上滚动显示栏目；又或者向下滚动到底部时异步...: 0 441

Superslide响应式页面直接应用手机端技巧介绍 如果是响应式网站，那么用superslide做轮播图需要做两个，这无疑是非常不方便的...: 1 347

JS点击复制data-*属性（支持多个元素） 分享一段js原生点击复制data-*属性的源码，根据onclick事件触发，复制当前元素...: 0 285

JS控制输入字数的两个方案 我们在文章输入框中经常有用到字数控制，但字数控制有两种方案，一种是字母/空...: 0 295

jQuery监听点击事件弹出关注二维码教程 通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能，今天鸥哥讲讲这...: 0 361

js判断windows操作系统还是mac os系统 网站日常访客主要是windows和mac os两种操作系统，如果网站提供资源下载，则需...: 0 1518

JS判断苹果iPhone与iPad、安卓设备类型适配 在网站开发的过程中，一些涉及到资源下载的网站会通过判断不同系统手机来展示...: 3 529

随机JS/JQuery开发教程

响应式网站pc新开窗口，手机端怎样用jquery在当前页面跳转 就国内的搜索习惯而言，pc大多是习惯于新开一个窗口。这本无所谓，但如果是响应...: 1 334

怎样通过匿名函数让全局变量变为局部变量？ 在几个人合作开发一个页面的时候用匿名函数把你的包起来尤...: 1 327

jquery监听并返回用户输入的中文字符 jQuery的监听事件会监听全部输入，并按照顺序展示出来。例如输入帝国cms，如果...: 0 221

jQuery怎样监听input输入状态？ 联想词搜索是一个相当好用的功能，通过联想词搜索可实现快速匹配用户需求的目...: 1 267

jQuery滚动触底ajax加载怎样防止加载多次？ ajax如果做滚动加载，一瞬间的滑动会导致多次提交请求，如果不做处理，则会加载多...: 1 604

jQuery将一个常规的时间转为时间戳 jQuery将一个常规的时间转为时间戳怎么做呢？ <script>(function($) { $.ex...: 1 225

jQuery怎样实现动态倒计时效果？ jQuery做动态倒计时效果用的非常多，常规的比如过年过节倒计时、活动开始/结...: 1 253

jQuery怎样获取元素自定义属性做数据交互 在网站数据交互过程中，我们经常需要用到元素自定义属性，jQuery就可以实现获取...: 0 281