脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → JavaScript一键复制

JavaScript实现一键复制内容剪贴板

 更新时间：2022年07月22日 14:45:51   作者：TANKING  
这篇文章主要为大家介绍了JavaScript实现一键复制内容，document.execCommand原生JS设置剪贴板的实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用JavaScript原生的方法进行设置剪贴板。

代码

copy.html

<!DOCTYPE html>
<html>
<head>
    <title>一键复制demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        h2{
            text-align: center;
            margin-top: 20px;
        }
        #neirong{
            width: calc(90% - 20px);
            padding:10px 10px;
            margin:20px auto;
            background: #eee;
            border-radius: 5px;
        }
        #copy{
            border:none;
            width: 90%;
            height: 45px;
            background: #39f;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<h2>一键复制demo</h2>
<div id="neirong">这是内容这是内容这是内容这是内容</div>
<button id="copy">复制</button>

<script>
function copyArticle(event){
      const range = document.createRange();
      range.selectNode(document.getElementById('neirong'));
      const selection = window.getSelection();
      if(selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      alert("复制成功");
}

window.onload = function () {
  var obt = document.getElementById("copy");
  obt.addEventListener('click', copyArticle, false);
}
</script>
</body>
</html>

实现效果

以上就是JavaScript实现一键复制内容剪切板的详细内容，更多关于JavaScript一键复制内容的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • app场景下uniapp的扫码记录

    app场景下uniapp的扫码记录

    这篇文章主要为大家介绍了app场景下uniapp的扫码记录实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 微信小程序 MINA文件结构

    微信小程序 MINA文件结构

    这篇文章主要介绍了微信小程序 MINA文件结构的相关资料,这里详细介绍了微信小程序的文件目录及文件作用，需要的朋友可以参考下
    2016-10-10
  • 微信小程序 解决请求服务器手机预览请求不到数据的方法

    微信小程序 解决请求服务器手机预览请求不到数据的方法

    这篇文章主要介绍了微信小程序 解决请求服务器手机预览请求不到数据的方法的相关资料,配置https时，要使用443端口，就可以解决，需要的朋友可以参考下
    2017-01-01
  • accesskey 提交

    accesskey 提交

    accesskey 提交...
    2006-06-06
  • 微信小程序 定位到当前城市实现实例代码

    微信小程序 定位到当前城市实现实例代码

    这篇文章主要介绍了微信小程序 定位到当前城市实现实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • js作用域及作用域链工作引擎

    js作用域及作用域链工作引擎

    这篇文章主要为大家介绍了js作用域及作用域链工作引擎，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 微信小程序 vidao实现视频播放和弹幕的功能

    微信小程序 vidao实现视频播放和弹幕的功能

    这篇文章主要介绍了微信小程序 vidao实现视频播放和弹幕的功能的相关资料,这里提供实现代码及实现效果图，需要的朋友可以参考下
    2016-11-11
  • 徒手实现关于JavaScript的24+数组方法

    徒手实现关于JavaScript的24+数组方法

    数组是我们日常工作中用的最频繁的一类数据结构，能帮助我们解决许多问题，而其本身也包含接近33个之多的方法，做了一个脑图分类如下，熟练使用数组的你，是否想知道他们内部的实现原理呢？接下来小编就带大家进入主题，希望能帮助到你
    2021-09-09
  • 前端JavaScript大管家 package.json

    前端JavaScript大管家 package.json

    这篇文章主要介绍了前端JavaScript大管家 package.json，在每个前端项目中，都有package.json文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等，下面我们就来学习 package.json的详细内容,需要的朋友可以参考一下
    2021-10-10
  • 微信小程序 canvas API详解及实例代码

    微信小程序 canvas API详解及实例代码

    这篇文章主要介绍了微信小程序 canvas API详解及实例代码的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论