JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容剪貼板
引言
有時(shí)候?yàn)榱朔奖阌脩艨焖購?fù)制頁面的內(nèi)容,一般的做法就是添加一個(gè)按鈕給用戶點(diǎn)擊一下就復(fù)制下來了,這邊使用JavaScript原生的方法進(jìn)行設(shè)置剪貼板。
代碼
copy.html
<!DOCTYPE html>
<html>
<head>
<title>一鍵復(fù)制demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<style type="text/css">
*{
padding:0;
margin:0;
}
h2{
text-align: center;
margin-top: 20px;
}
#neirong{
width: calc(90% - 20px);
padding:10px 10px;
margin:20px auto;
background: #eee;
border-radius: 5px;
}
#copy{
border:none;
width: 90%;
height: 45px;
background: #39f;
font-size: 16px;
color: #fff;
font-weight: bold;
border-radius: 5px;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<h2>一鍵復(fù)制demo</h2>
<div id="neirong">這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容</div>
<button id="copy">復(fù)制</button>
<script>
function copyArticle(event){
const range = document.createRange();
range.selectNode(document.getElementById('neirong'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("復(fù)制成功");
}
window.onload = function () {
var obt = document.getElementById("copy");
obt.addEventListener('click', copyArticle, false);
}
</script>
</body>
</html>實(shí)現(xiàn)效果

以上就是JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容剪切板的詳細(xì)內(nèi)容,更多關(guān)于JavaScript一鍵復(fù)制內(nèi)容的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- JS復(fù)制到剪貼板示例代碼
- 用js將內(nèi)容復(fù)制到剪貼板兼容瀏覽器
- js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法
- JavaScript實(shí)現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法
- JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能兼容所有瀏覽器(推薦)
- js復(fù)制內(nèi)容到剪貼板代碼,js復(fù)制代碼的簡(jiǎn)單實(shí)例
- js實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)
- JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能
- JavaScript復(fù)制內(nèi)容到剪貼板的兩種常用方法
- JavaScript復(fù)制文案到剪貼板小技巧
- vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案
- JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)
相關(guān)文章
JavaScript前端實(shí)用的工具函數(shù)封裝
這篇文章主要為大家介紹了JavaScript前端實(shí)用的一些工具函數(shù)的封裝,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
javascript數(shù)據(jù)類型之原始類型詳解
這篇文章主要為大家介紹了javascript數(shù)據(jù)類型之原始類型詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
JavaScript編程通過Matlab質(zhì)心算法定位學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript編程中通過Matlab質(zhì)心算法來定位的算法學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-10-10
Javascript使用integrity屬性進(jìn)行安全驗(yàn)證
這篇文章主要介紹了Javascript使用integrity屬性進(jìn)行安全驗(yàn)證,在html中,script標(biāo)簽可以通過src屬性引入一個(gè)js文件,引入的js文件可以是本地的,也可以是遠(yuǎn)程的,下面我們一起來看看文章詳細(xì)內(nèi)容2021-11-11
JS前端宏任務(wù)微任務(wù)及Event Loop使用詳解
這篇文章主要為大家介紹了JS前端宏任務(wù)微任務(wù)及Event Loop使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
微信小程序 scroll-view組件實(shí)現(xiàn)列表頁實(shí)例代碼
這篇文章主要介紹了微信小程序 scroll-view組件實(shí)現(xiàn)列表頁實(shí)例代碼的相關(guān)資料,scroll-view組件介紹scroll-view是微信小程序提供的可滾動(dòng)視圖組件,其主要作用是可以用來做手機(jī)端經(jīng)常會(huì)看到的上拉加載 ,需要的朋友可以參考下2016-12-12

