<html>

<head>

	<meta charset="UTF-8">

	<title>9行代码实现复制内容至剪切板</title>

	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

  <meta name="renderer" content="webkit">

  <style>

	  body {

	  	padding: 36px;

	  	display: flex;

	  	flex-direction: column;

	  	align-items: center;

	  }

  	.ma-btn {

			border-radius: 4px;

			background: #53a5ec;

			color: #fff;

			font-size: 14px;

			padding: 0.8em 1.6em;

			user-select: none;

			-webkit-appearance: none;

			cursor: pointer;

			text-align: center;

		}

		.ma-btn.extra {

			width: 72px;

			margin-top: 36px;

		}

  </style>

</head>

<body>

	<div class="copy--text copy_text" id="copy">复制到剪贴板的内容</div>

	<div class="ma-btn extra copy_btn">复制</div>

	<script>

		var btn = document.querySelectorAll(".copy_btn")[0],

				copy_text = document.querySelectorAll(".copy_text")[0];

		btn.addEventListener("click",function() {

			copy(copy_text);

		},false); 

		function copy(el) {

			var range = document.createRange();

			var end = el.childNodes.length;

			range.setStart(el,0);

			range.setEnd(el,end);

			var selection = window.getSelection();

			selection.removeAllRanges();

			selection.addRange(range);

			document.execCommand("copy",false,null);

			selection.removeRange(range);

		}

	</script>

</body>

</html>

　　

原生js粘贴复制【源码】的更多相关文章

  1. 原生js星星评分源码

    html: <div id="fiveStars"> <div>到场时间:<img v-for="(star,index) in stars ...

  2. 从发布订阅模式入手读懂Node.js的EventEmitter源码

    前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop.本文会讲一下不 ...

  3. PureMVC(JS版）源码解析：总结

    PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...

  4. PureMVC(JS版）源码解析

    PureMVC(JS版)源码解析:总结   PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...

  5. Vue.js 2.0源码解析之前端渲染篇

    一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...

  6. html5shiv.js分析-读源码之javascript系列

    xiaolingzi 发表于 2012-05-31 23:42:29 首先,我们先了解一下html5shiv.js是什么. html5shiv.js是一套实现让ie低版本等浏览器支持html5标签的解 ...

  7. vue系列---snabbdom.js使用及源码分析(九)

    一:什么是snabbdom? 在学习Vue或React中,我们了解最多的就是虚拟DOM,虚拟DOM可以看作是一颗模拟了DOM的Javascript树,主要是通过vnode实现一个无状态的组件,当组件状 ...

  8. 基于wke封装的duilib的webkit浏览器控件，可以c++与js互交，源码及demo下载地址

    转载请说明原出处,谢谢~~ 前些日子用wke内核封装了duilib的webkit浏览器控件,好多群里朋友私聊我希望可以我公布源码,今天把这个控件的源码和使用demo公布.其实这个控件封装起来没什么难度 ...

  9. PureMVC(JS版）源码解析（二）：Notification类

    上篇博客,我们已经就PureMVC的设计模式进行的分析,这篇博文主要分析Notification(消息)类的实现. 通过Notification的构造函数可以看出,PureMVC中的Notificat ...

随机推荐

  1. Swagger2 添加HTTP head参数，解决用户是token信息保留

    转:http://blog.csdn.net/u014044812/article/details/71473226 大家使用swagger往往会和JWT一起使用,而一般使用jwt会将token放在h ...

  2. 010. C++ 传值与传引用

    1.参数传递 参数传递:pass by value vs. pass by reference(to const) 推荐:能传引用,尽量传引用(高效,尤其在需要拷贝的对象很大时) class comp ...

  3. 类的起源与metaclass

    一.概述 我们知道类可以实例化出对象,那么类本身又是怎么产生的呢?我们就来追溯一下类的起源. 二.类的起源 2.1 创建一个类 class Foo(object): def __init__(self ...

  4. 前端PHP入门-010-内部函数

    内部函数,是指在函数内部又声明了一个函数. 注意事项: 内部函数名,不能是已存在的函数名 假设在函数a里面定义了一个内部函数,不能调用两次函数a. <?php function foo() { ...

  5. HDU 6061 推导 NTT

    复函数,递归代入,可以得到最终的式子为$f(x-\sum_{i=1}^{m}{a_i})$,且$f(x) = \sum_{i = 0}^{n}{c_ix^i}$,求最终各个x项的系数. 设$S=\su ...

  6. webapi + windows计划 + mshta 实现定时执行任务

    当然,实现定时任务有更好的操作方式,比如方式一:asp.net mvc+quartz.net +corn +webapi,asp.net mvc做任务管理的平台,使用CronTrigger做定时触发, ...

  7. 【POJ】2774 Long Long Message

    [题意]给定两个字符串S和T,求最长公共子串.len<=10^5. [算法]后缀自动机 [题解]对字符串S建SAM,然后令串T在S上跑匹配. 这是自动机最原本的功能——匹配,就是串T在SAM(S ...

  8. iOS数据存取---iOS-Apple苹果官方文档翻译

    CHENYILONG Blog iOS数据存取---iOS-Apple苹果官方文档翻译 数据存取/*技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http:// ...

  9. css各种姿势的水平居中

    首先是最常用的,利用margin属性的auto来进行水平居中 margin: 0 auto; 其中0是指上下的margin,auto是左右的margin,margin这个属性的简写是按顺时针走的,也就 ...

  10. 组合数+逆元 A - Chat Group Gym - 101775A

    题目链接:https://cn.vjudge.net/contest/274151#problem/A 具体思路:我们可以先把所有的情况算出来,为2^n.然后不合法的情况减去就可以了.注意除法的时候要 ...