js实现各种复制功能

引用：

<script src="https://clipboardjs.com//dist/clipboard.min.js"></script>

示例1：

Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:

<!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>

    <!-- . Define some markup -->

    <input id="foo" type="text" value="hello">

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- . Include library -->

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

    <!-- . 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>

示例2：

Cut
提示：点击Cut按钮，把“hello”剪切到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-textarea</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <textarea id="bar">hello</textarea>

    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

    <!-- . Include library -->

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

    <!-- . 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>

示例3：
hello

Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-div</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <div>hello</div>

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- . Include library -->

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

    <!-- . 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>

示例4：
Copy
提示：点击Copy按钮，把“to be or not to be”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>function-text</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button class="btn">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

    var clipboard = new Clipboard('.btn', {

        text: function() {

            return 'to be or not to be';

        }

    });

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例5：
Copy

hello
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>function-target</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button class="btn">Copy</button>

    <div>hello</div>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

    var clipboard = new Clipboard('.btn', {

        target: function() {

            return document.querySelector('div');

        }

    });

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例6：
Copy Copy Copy
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>constructor-selector</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button class="btn" data-clipboard-text="">Copy</button>

    <button class="btn" data-clipboard-text="">Copy</button>

    <button class="btn" data-clipboard-text="">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard by passing a string selector -->

    <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>

示例7：
Copy Copy Copy
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>constructor-nodelist</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button data-clipboard-text="">Copy</button>

    <button data-clipboard-text="">Copy</button>

    <button data-clipboard-text="">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard by passing a list of HTML elements -->

    <script>

    var btns = document.querySelectorAll('button');

    var clipboard = new Clipboard(btns);

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例8：
Copy
提示：点击Copy，把“1”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>constructor-node</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <div id="btn" data-clipboard-text="">

        <span>Copy</span>

    </div>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard by passing a HTML element -->

    <script>

    var btn = document.getElementById('btn');

    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

官方Demo:http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/

巴特西

js实现各种复制功能

最新文章

热门文章