js/html实现复制功能

1.js复制

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>复制功能</title>
</head>
 
<body>
    <span id="copyText1">这里是被复制的内容</span>
    <input type="button" onClick="copy1()" value="点击复制"/>
 
    <span id="copyText2">44545123664444446666666</span>
    <input type="button" value="复制" onclick="copy2(document.getElementById('copyText2'));" />
</body>
 
<script type="text/javascript">
    function copy1() {
        var copy = document.getElementById("copyText1").innerText;
        var oInput = document.createElement('input');
        oInput.value = copy;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        alert('复制成功');
    }
 
    function copy2(x) {
        if (document.selection) {
            var range = document.body.createTextRange(); //ie
            range.moveToElementText(x);
            range.select();
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            selection.removeAllRanges();
            range.selectNodeContents(x);
            selection.addRange(range);
        }
        document.execCommand("copy");
    }
 
</script>
 
</html>复制

2.clipboard复制

 使用npm工具安装
 
npm install clipboard --save
 
下载压缩包，链接：https://github.com/zenorocha/clipboard.js/archive/master.zip复制

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard基本的使用方法</title>
</head>
 
<body>
    <!-- 1. 定义一些标记 -->
    <!-- 2. 设置按钮 -->
 
    <!-- 示例1：复制input元素的value值 -->
    <input id="foo" type="text" value="这是input元素的value值" />
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>
 
    <!-- 示例2：剪切textarea元素的值 -->
    <textarea id="bar">这里的文本可被复制或者剪切</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字</button>
 
    <!-- 示例3：复制div元素的值 -->
    <div>这是div元素里的文字</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字</button>
 
    <!-- 示例4：复制button自己设置的值 -->
    <button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字</button>
</body>
<!-- 3. 引入库文件 -->
<script src="./node_modules/clipboard/dist/clipboard.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> -->
 
<script>
    //4. 实例化clipboard
    var clipboard = new ClipboardJS('.btn');
 
    //5. 复制成功的响应事件【按F12控制台可见】
    clipboard.on('success', function (e) {
        console.log(e);
        //打印动作信息（copy或者cut）
        console.info('Action:', e.action);
        //打印复制的文本
        console.info('Text:', e.text);
        //打印trigger
        console.info('Trigger:', e.trigger);
    });
 
    //6. 复制失败的响应事件
    clipboard.on('error', function (e) {
        console.log(e);
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>
 
</html>复制

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard高级的使用方法1</title>
</head>
 
<body>
 
    <!-- 1. 基本信息定义 -->
    <button class="btn">点击复制</button>
    <div>这里的内容将被复制</div>
 
    <!-- 2. 引入库文件 -->
    <!-- <script src="./node_modules/clipboard/dist/clipboard.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
 
    <script>
        //3. 实例化clipboard
        var clipboard = new ClipboardJS('.btn', {
            target: function () {
                //获取文档中第一个 <div> 元素：
                return document.querySelector('div');
                //返回文档中id为copy-btn的元素
                //document.querySelector("#copy-btn");
                //返回文档中 class="btn" 的第一个元素:
                //document.querySelector(".btn");
                //返回文档中 class="btn" 的第一个 <p> 元素:
                //document.querySelector("p.btn");
                //还有更多方法，可自行百度
            },
        });
 
        //复制成功响应
        clipboard.on('success', function (e) {
            console.log(e);
        });
 
        //复制失败响应
        clipboard.on('error', function (e) {
            console.log(e);
        });
    </script>
</body>
 
</html>复制

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard高级的使用方法2</title>
</head>
 
<body>
    <!-- 1. 定义基本元素 -->
    <button class="btn">Copy</button>
 
    <!-- 2. 引入库文件 -->
    <!--  <script src="../dist/clipboard.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
 
    <script>
        //3. 实例化clipboard
        var clipboard = new ClipboardJS('.btn', {
            text: function () {
                return '这里的文本将被复制';
            },
        });
 
        //复制成功响应
        clipboard.on('success', function (e) {
            console.log(e);
        });
 
        //复制失败响应
        clipboard.on('error', function (e) {
            console.log(e);
        });
    </script>
</body>
 
</html>复制

js/html实现复制功能

1.js复制

2.clipboard复制

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>复制功能</title>
	</head>

	<body>
	<span id="copyText1">这里是被复制的内容</span>
	<input type="button" onClick="copy1()" value="点击复制"/>

	<span id="copyText2">44545123664444446666666</span>
	<input type="button" value="复制" onclick="copy2(document.getElementById('copyText2'));" />
	</body>

	<script type="text/javascript">
	function copy1() {
	var copy = document.getElementById("copyText1").innerText;
	var oInput = document.createElement('input');
	oInput.value = copy;
	document.body.appendChild(oInput);
	oInput.select(); // 选择对象
	document.execCommand("Copy"); // 执行浏览器复制命令
	oInput.className = 'oInput';
	oInput.style.display = 'none';
	alert('复制成功');
	}

	function copy2(x) {
	if (document.selection) {
	var range = document.body.createTextRange(); //ie
	range.moveToElementText(x);
	range.select();
	} else if (window.getSelection) {
	var selection = window.getSelection();
	var range = document.createRange();
	selection.removeAllRanges();
	range.selectNodeContents(x);
	selection.addRange(range);
	}
	document.execCommand("copy");
	}

	</script>

	</html>

	使用npm工具安装

	npm install clipboard --save

	下载压缩包，链接：https://github.com/zenorocha/clipboard.js/archive/master.zip

js/html实现复制功能

1.js复制

2.clipboard复制

微信扫一扫：分享