快捷導(dǎo)航

JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本(推薦)

更新時(shí)間：2016年11月25日 10:05:14 作者：段昊辰 ·

這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下

html5的webAPI接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴flash。

代碼如下：

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

測試：

瀏覽器的版本號為我測試時(shí)使用的版本。

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

IE9、IE10、IE11會彈出提示詢問是否將文本粘貼到剪貼板上。

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ū)域文本，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: