js 實現複製剪切

時間 2020-05-25

原文原文鏈接

原生js實現複製

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>copy</title>
</head>
<body>
<span id='copy'>複製哈哈哈哈啊哈哈</span>
<button id='btn'>複製</button>
</body>
<script type="text/javascript">
    function copyText()
    {
        var Url2=document.getElementById("copy").innerText;
        var oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 選擇對象
        document.execCommand("Copy"); // 執行瀏覽器複製命令
        oInput.className = 'oInput';
        oInput.style.display='none';
        alert('複製成功');
    }
    document.getElementById('btn').onclick = function() {
        copyText()
    }
</script>
</html>

上線代碼只是我在腳本之家看見的一段代碼,上面還有不少實現複製的方法,這些方法若是隻是用在PC端那麼已經夠了,若是要使用在移動端, Android高版本沒有任何問題,可是IOS不論是什麼版本都沒法實現複製javascript

clipboard.js實現複製

爲何要是用clipboard.js

複製文本到剪切板並不難, 它不須要不少個步驟或者加載不少KB的代碼來完成, 最重要的是, 它不該該依賴於Flash或者任何臃腫的框架, 這就是clipboard.js開發的目的html

install

你能夠經過npm來獲取它java

npm install clipboard --save

若是你不用install, 能夠下載一個ZIP文件git

建立

首先將dist上面的js或者第三方提供的文件引入到網頁中github

<script src="dist/clipboard.min.js"></script>

而後須要經過傳遞DOM選擇器,HTML元素或者HTML列表來實例化它chrome

new Clipboard('.btn');

在內部咱們須要獲取與你選擇器所匹配的元素,併爲每一個元素添加監聽器,可是有一個問題,若是你有數百個匹配項, 那這個方法會消耗大量的內存.npm

基於這個問題, 咱們能夠用事件代理, 它只用一個監聽器來代替多個監聽器瀏覽器

用法

咱們能夠利用HTML自定義屬性來提升代碼的可用性一個很是經常使用的列子就是點擊某個按鈕複製另外一個元素的內容,你能夠經過 data-clipboard-target 自定義屬性來實現app

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">
        <img src="assets/clippy.svg" alt="Copy to clipboard">
    </button>
</body>
<script type="text/javascript">
    new Clipboard('.btn');
</script>
</html>

從一個元素中剪切文本框架

你能夠定義一個屬性data-clipboard-action來指定是要copy仍是cut, 若是省略這個屬性,會默認設置copy

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <!-- Target -->
    <textarea id="bar">Mussum ipsum cacilds...</textarea>
    <!-- Trigger -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
        Cut to clipboard
    </button>
</body>
<script type="text/javascript">
    new Clipboard('.btn');
</script>
</html>

正如你所想的同樣,這個cut屬性只適用於<input />和<textarea></textarea>元素

從屬性複製文本

事實上你不須要其餘元素來複制它的內容,你能夠再出發元素上包含一個 data-clipboard-text屬性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <!-- Trigger -->
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>
</body>
<script type="text/javascript">
    new Clipboard('.btn');
</script>
</html>

事件

在實際開發用,你須要顯示一些用戶反饋,不如複製/剪切成功這樣的提示語,這就是咱們爲何要寫一些事件,好比success和error一塊兒來實現你的定製邏輯

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <!-- Trigger -->
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>
</body>
<script type="text/javascript">
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>
</html>

高級用法

若是你不想修改你的HTML,那麼你可使用一個很是方便的API, 全部你要作的一些事情都包含在一個function中, 在和這個函數中寫你的邏輯,而且返回一個值

列如你須要動態設置一個target,你須要返回一個節點

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

若是你想動態設置一個text,你須要返回一個字符串

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

爲了在Bootstrap Modals或任何其餘更改焦點的庫中使用，您須要將聚焦的元素設置爲container值

new Clipboard('.btn', {
    container: document.getElementById('modal')
});

另外，若是您正在使用單頁面應用程序，則可能須要更精確地管理DOM的生命週期。如下是清理咱們建立的事件和對象的方法

var clipboard = new Clipboard('.btn');
clipboard.destroy();

瀏覽器支持

這個庫依賴於Selection和execCommand API,第一個支持全部瀏覽器，第二個支持如下瀏覽器

chrome	edg	firefox	IE	Opera	Safari
42+	12+	41+	9+	29+	10+

若是你須要兼容低版本的瀏覽器 clipboard .js會優雅降級

你所要作的就是顯示一個工具提示，說明Copied什麼時候success調用事件，以及Press Ctrl+C to copy什麼時候error調用事件，由於文本已經被選中

您還能夠經過運行來檢查是否支持clipboard.js Clipboard.isSupported()，這樣您就能夠隱藏UI中的複製/剪切按鈕

參考連接

相關標籤/搜索

每日一句

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