其实源生js也可以实现,但引入jq库可以方便的兼容复制更多类型dom的内容。
实际使用的时候注意,class 和 标签 有重复性,所以尽量使用id来保证复制源的唯一性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js复制指定dom内容</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="id_copy"> 我是id为 id_copy 的内容 </div>
<button onclick="onCopy('#id_copy')">复制指定id内容</button>
<div class="class_copy"> 我是class为 class_copy 的内容 </div>
<button onclick="onCopy('.class_copy')">复制指定class内容</button>
<p>我是第一个p标签的内容</p>
<p>我是第二个p标签的内容</p>
<button onclick="onCopy('p')">复制p标签内容,结果取页面第一个p标签的内容</button>
<!-- textarea用于缓存复制到的内容 -->
<textarea id="tmp" style="height:0;width:0;opacity: 0;"></textarea>
</body>
<script>
//复制按钮
function onCopy(obj){
//if(!obj) alert('没标识数据源');
var tar = obj || '#copy';
var content = $(tar).html() || $(tar).val();//input的时候取value
//textarea缓存要复制的内容
$('#tmp').val(content);
$('#tmp').select();
try{
document.execCommand("Copy"); //内容复制到剪切板
alert('复制成功');
}catch(e){
alert('浏览器不支持快捷复制,请选中内容后,CTRL+C');
}
}
</script>
</html>