JQery插件clipboard.js ----將文本複製到剪貼板的現代化方法

時間 2019-11-16

標籤 jqery 插件 clipboard.js clipboard 文本複製剪貼板現代化方法欄目 JavaScript 简体版

原文原文鏈接

###html

以前用了js自帶的剪貼板對象clipboardData 對象覺得就能夠實現粘貼複製，可是種只支持IE的。spa

就找了jq的一個插件Zclip，可是網上的說法是利用了flesh來實現的，我用了以後能夠實現，可是面對我自啊table的td中存在多個要實現粘貼複製的話，就會有問題了。插件

因此，才找了如今這個jqery的另外一個插件，相對更好些，可以支持移動端的code

###htm

插件官網：https://clipboardjs.com/對象

實現起來也很簡單，blog

我就弄個例子：ip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

相關標籤/搜索