/* 創(chuàng)建range對(duì)象 */
const range = document.createRange();
range.selectNode(element); // 設(shè)定range包含的節(jié)點(diǎn)對(duì)象 
/* 窗口的selection對(duì)象，表示用戶(hù)選擇的文本 */
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges(); // 將已經(jīng)包含的已選擇的對(duì)象清除掉
selection.addRange(range); // 將要復(fù)制的區(qū)域的range對(duì)象添加到selection對(duì)象中
document.execCommand('copy'); // 執(zhí)行copy命令，copy用戶(hù)選擇的文本

測(cè)試：

瀏覽器的版本號(hào)為我測(cè)試時(shí)使用的版本。

edge瀏覽器、Chrome（v54.0.2840.99 m）、Firefox（v49.0.1）可用。

IE9、IE10、IE11會(huì)彈出提示詢(xún)問(wèn)是否將文本粘貼到剪貼板上。

IE7、IE8不支持該功能。

IOS10的Safari瀏覽器可用。

根據(jù)反饋，IOS9以下的Safari瀏覽器應(yīng)該是不支持該功能的。

Demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<article id="article">
<h4>公園一日游</h4>
<time>2016.8.15 星期二</time>
<p>今天風(fēng)和日麗，我和小紅去了人民公園，玩了滑梯、打雪仗、劃船，真是愉快的一天啊。</p>
</article>
<button id="copy">復(fù)制文章</button>
<textarea style="width: 500px;height: 100px;" placeholder="試一試ctrl + v"></textarea>
<script>
function copyArticle(event){
const range = document.createRange();
range.selectNode(document.getElementById('article'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
}
document.getElementById('copy').addEventListener('click', copyArticle, false);
</script>
</body>
</html>

以上所述是小編給大家介紹的JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: