1、第一種,通過clipboard.js插件實現(推薦)
此插件封裝了很多種使用方式很方便,具體demo,可以去GitHub上看,clipboard傳送門
2、第二種,純js實現:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CopyDemo</title>
</head>
<body>
<div id=NewsToolBox></div>
<div id="text-content">
<p>測試p1</p>
<p>測試p2</p>
</div>
<button id="copy-text-btn">復制</button>
</body>
</html>
<script type="text/javascript">
// 復制全文
document.getElementById("copy-text-btn").onclick=function(){
var ssrsss =document.getElementById("text-content").innerText.replace(/\ +/g, ""); //獲取文本並去掉空格
var flag = copyText(ssrsss); //傳遞文本
alert(flag ? '復制成功' : '復制失敗')
};
function copyText(text) {
var textarea = document.createElement("textarea"); //創建input對象
var currentFocus = document.activeElement; //當前獲得焦點的元素
var toolBoxwrap = document.getElementById('NewsToolBox'); //將文本框插入到NewsToolBox這個之后
toolBoxwrap.appendChild(textarea); //添加元素
textarea.value = text;
textarea.focus();
if (textarea.setSelectionRange) {
textarea.setSelectionRange(0, textarea.value.length); //獲取光標起始位置到結束位置
} else {
textarea.select();
}
try {
var flag = document.execCommand("copy"); //執行復制
} catch (eo) {
var flag = false;
}
toolBoxwrap.removeChild(textarea); //刪除元素
currentFocus.focus();
return flag;
}
</script>
