编程 Javascript

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

Posted in Javascript onJuly 23, 2022

引言

有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用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实现一键复制内容剪切板的详细内容，更多关于JavaScript一键复制内容的资料请关注三水点靠木其它相关文章！

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

- Author -

TANKING

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于JavaScript 类的使用详解

May 07 Javascript

设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)

Nov 18 Javascript

JS获取html对象的几种方式介绍

Dec 05 Javascript

js+div实现图片滚动效果代码

Feb 10 Javascript

javascript框架设计读书笔记之字符串的扩展和修复

Dec 02 Javascript

js中 javascript:void(0) 用法详解

Aug 11 Javascript

jQuery实现响应鼠标背景变化的动态菜单效果代码

Aug 27 Javascript

js实现二级菜单渐隐显示

Nov 03 Javascript

vue2.0开发实践总结之入门篇

Dec 06 Javascript

JS原生瀑布流效果实现

Apr 26 Javascript

vue-router二级导航切换路由及高亮显示的实现方法

Jul 10 Javascript

node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例

Feb 11 Javascript

从原生JavaScript到React深入理解

Jul 23 #Javascript

JS前端监控采集用户行为的N种姿势

Jul 23 #Javascript

JS前端可扩展的低代码UI框架Sunmao使用详解

Jul 23 #Javascript

uniapp引入支付宝原生扫码插件步骤详解

Jul 23 #Javascript

JS前端宏任务微任务及Event Loop使用详解

Jul 23 #Javascript

关于对TypeScript泛型参数的默认值理解

Jul 15 #Javascript

vue递归实现树形组件

Jul 15 #Vue.js

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

目录

引言

代码

实现效果