源生JS實現點擊複製功能

時間 2019-11-19

原文原文鏈接

以前在工做中，有位同事問過我一個問題，JS如何實現點擊複製功能。給他解決後如今來總結概括一下，順便作個筆記。html

PS：此乃本人第一篇博客（跟着同事大佬學習），涉及知識尚淺，若有任何意見和建議請告知於我。下面開始正文：學習

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>源生JS實現點擊複製功能</title>
</head>
<body>
<button onclick="clkCopy()">點擊複製</button>
<input type="text" id="text" value="123">
<script>
    function clkCopy() {
        var text = document.getElementById("text");
        text.select();
        document.execCommand('copy');
        alert("複製成功！");
    }
</script>
</body>
</html>

經過DOM元素的select()方法能夠選擇到<input>和<textarea>中的文字，再調用document.execCommand('copy');實現複製功能。測試

那麼，若是咱們想要複製<div>中的內容，能夠用上述方法嘛？經測試，使用上述方法點擊複製<div>中的內容會報錯spa

那麼咱們能夠使用以下方法來實現此功能：code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>源生JS實現點擊複製功能</title>
</head>
<body>
<button onclick="clkCopyDiv()">點擊複製</button>
<div id="div">123</div>
<script>
    function clkCopyDiv() {
        var text = document.getElementById("div");
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        alert("複製成功！");
    }
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。