方法一:使用ZeroClipboard.js插件

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text">
<script type="text/javascript" src="dist/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="dist/ZeroClipboard.min.js"></script>
<div contenteditable="true" style="width:200px;height: 400px;border:1px solid red"></div>
<div id="content" >
<p>99u999999</p>
<a><img src="http://app1.xesimg.com/roommsg/ab78423e59a018f0adaa212a3998a15a_small.jpg" alt="" data-url="http://app1.xesimg.com/roommsg/ab78423e59a018f0adaa212a3998a15a_big.jpg" class="img-rounded img-thumbnail"></a>
</div>
<div>ddd</div>
<input id="copy" type="button" data-clipboard-text="复制文本" value="复制固定文本内容">
<input id="copyHtml" type="button" data-clipboard-target="content" value="复制一个id中的所有html内容">
<script type="text/javascript">
new ZeroClipboard( document.getElementById("copy") );
new ZeroClipboard( document.getElementById("copyHtml") );
</script>
</body>
</html>

方法二:使用document.execCommand('copy');

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS复制功能</title>
<style>
*{
margin:0;
padding:0;
}
input{
border:1px solid #ccc;
padding: 5px;
width: 200px;
}
button{
height:32px;
}
</style>
</head>
<body>
<div style="width: 400px;height: 200px;border: 1px solid red" contenteditable="true"></div>
<input type="text" placeholder="里面输入文字" value="复制文本域中的内容">
<div id="copyContent">复制非文本域的元素内容<p><a href="###">链接</a></p></div>
<button id="copyInput" type="button">点击复制</button>
<button id="noInput" type="button">点击复制非文本框文本域的元素</button>
</body>
</html>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script>
$(document).ready(function(){
//复制文本域中的内容
$('#copyInput').click(function(){
$('input').select();
document.execCommand('copy');
//alert('复制文本域中的内容')
})
//复制非文本域的元素内容
$('#noInput').click(function(){
//狐火浏览器下会把外层的id元素也复制进去,容易造成错误,所以需要区分copy内容的id的范围 ,但是目前没有找到区分的方法,即使在copyContent外 加一层居然也会把加的那层也复制进去
SelectText('copyContent');
document.execCommand('copy');
//alert('复制非文本域的元素内容')
})
})
function SelectText(element) {
var browserName=navigator.userAgent.toLowerCase();
var text = document.getElementById(element);
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
//苹果浏览器下,现已经不支持html的内容
// var selection = window.getSelection();
// selection.setBaseAndExtent(text, 0, text, 1);
}
}
</script>

  

js实现复制功能,将需要复制的内容放入剪切板上的更多相关文章

  1. js 将内容复制到剪切板上

    clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...

  2. 读取txt内容放入set中

    package pingbi; /** * 将txt文本读入导入到set中 * 问题: * 第一个地方有会多一个 ?--解决问题很简单,但不知道问题的原因 */ import java.io.Buff ...

  3. wpf 复制/剪切到本地系统剪切板中以供右键粘贴用

    原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用   http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html   /// & ...

  4. js获取用户当前页面复制的内容并修改

    如果只是单纯的获取页面上复制的内容可以使用window.getSelection()来获取选中的内容,在执行复制操作就可以了,但是如果想修改复制的内容可以先获取要复制的内容修改之后再用document ...

  5. Clipboard---将文本复制到剪切板上

    第一步:链接 Clipboard 的js文件 < script src = “ https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.m ...

  6. vue 复制文本到剪切板上

    1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...

  7. ZeroClipboard.js兼容各种浏览器复制到剪切板上

    http://www.cnblogs.com/huijieoo/articles/5569990.html <script type="text/javascript" sr ...

  8. js实现复制input的value到剪切板

    <button class="button-code button-copy">复制链接</button><script> $(".b ...

  9. 把js生成的内容放入网页原有的div上

    <script> ; ; //5列 ); ; var htmlstr="<table style='position:absolute;top:9%;left:10%; b ...

随机推荐

  1. [转]GAN论文集

    really-awesome-gan A list of papers and other resources on General Adversarial (Neural) Networks. Th ...

  2. 我的Maven POM配置

    刚刚把项目从Ant转到Maven,费了好多劲,主要是对Maven边用边学.问题主要集中在项目结构上不太一样,在程序的访问上也有区别,调试和打包等也和原来不太一样.终于折腾完一个可以正常运行的POM配置 ...

  3. ios 协议分析

    1 基本用途 可以用来声明一大堆方法(不能声明成员变量) 只要某个类遵守了这个协议,就相当于拥有了这个协议中的所有方法声明 只要父类遵守了某个协议,就相当于子类也遵守了 2 格式 协议的编写 @pro ...

  4. MFC坐标转换

    1.GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标(包括客户区和非客户区),这样可以得到窗口的大小和相对屏幕左上角(0,0)的位置. 2.GetClientRect取得窗口客户区(不 ...

  5. MySQL 插入emoji 表情

    create table doctorUserInfoMation ( id int not null auto_increment comment '系统ID', userId ) comment ...

  6. Linux MySQL 4G内存my.cnf配置表(转)

    # The following options will be passed to all MySQL clients[client]character-set-server = utf8  #### ...

  7. IDEA使用笔记(一)——使用前的基本设置

    前言:记忆不好,有些东西需要的时候又需要找一找,那就不如让“纸和笔”来帮忙记录一下啦!到时候查找也方便,而且是自己的东西印象更加的深刻,说不定还能帮助到他人多好玩的事情! 软件的下载.安装就不记啦!自 ...

  8. RHEL7 禁用gnome-inital-setup

    每次登陆系统后,都会跳出页面gnome-inital-setup 如果觉得讨厌,可以禁止该页面的出现: mkdir ~/.config echo "yes" >> ~/ ...

  9. 【转】DRY原则的误区

    很多编程的人,喜欢鼓吹各种各样的“原则”,比如KISS原则,DRY原则…… 总有人把这些所谓原则奉为教条或者秘方,以为兢兢业业地遵循这些,空喊几个口号,就可以写出好的代码.同时,他们对违反这些原则的人 ...

  10. 一段js代码

    原文地址 [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math ...