master

分支 (1)

管理

管理

master

copy-text
/
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制文字到剪切板演示页面</title>
    <link rel="stylesheet" href="https://www.zhangxinxu.com/sp/lulu/theme/edge/css/common/form.css">
    <style>
        body {
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        textarea {
            width: calc(100% - 2px);
            width: -webkit-fill-available;
            width: fill-available;
            width: stretch;
        }
        pre {
            border: 1px dashed;
            padding: 10px 15px;
        }
    </style>
</head>
<body>
    <h3>复制文字到剪切板测试页面</h3>
    <p>
        <button id="button" type="primary" is="ui-button">复制当前网址</button>
        <button id="button2" type="primary" is="ui-button">复制输入框里面的内容</button></p>
    <p>
        <textarea id="output" cols="60" rows="5" placeholder="用来粘贴测试" is="ui-textarea"></textarea>
    </p>

    <p>直接复制内容：<button id="button3" type="primary" is="ui-button">不设置按钮参数</button></p>

    <p>代码示意：</p>
    <pre>copyText(button, location.href, function (text) {
    console.log('复制成功：' + text);
});
copyText(button2, output, function (text) {
    console.log('复制成功：' + text);
});

button3.onclick = function () {
    copyText('CSS新世界', function (text) {
        console.log('复制成功：' + text);
    });
    // 内置的复制成功提示
    copyText.tips(event);
    // 改变按钮状态
    this.setAttribute('type', 'success');
};</pre>

    <br><br><br>
    <p align="center">
        <small>&copy; <a href="https://www.zhangxinxu.com/">zhangxinxu(.com)</a></small>
    </p>

    <script src="./copyText.js"></script>
    <script>
        copyText(button, location.href, function (text) {
            console.log('复制成功：' + text);
        });
        copyText(button2, output, function (text) {
            console.log('复制成功：' + text);
        });

        button3.onclick = function (event) {
            copyText('CSS新世界', function (text) {
                console.log('复制成功：' + text);
            });
            // 内置的复制成功提示
            copyText.tips(event);
            // 改变按钮状态
            this.setAttribute('type', 'success');
        };
    </script>
</body>
</html>