原生js实现点击复制文本，兼容ios

最新推荐文章于 2023-06-29 13:15:44 发布

-GRW-

最新推荐文章于 2023-06-29 13:15:44 发布

阅读量1.5k

点赞数 1

分类专栏：学习研发文章标签： js 黏贴复制兼容ios

本文链接：https://blog.csdn.net/gre_999/article/details/89399557

版权

学习研发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近做手机端H5网页，需要点击内容进行复制，纯JS实现

以下是效果图

代码实现---新建html文件，拷贝代码，即可查看效果

<!DOCTYPE html>
<html>
<head>
    <title>复制</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        .container {
            text-align: center;
        }

        .card {
            width: 76vw;
            height: auto;
            padding: 5vw 0vw 5vw 5vw;
            text-align: left;
            margin: 5vw;
            border: 1px solid #ddd;
            background: #f2f2f2;
        }

    </style>
    <script type="text/javascript">
        /**
         * 剪贴板
         * @param text
         */
        function clipBoard(text) {
            const body = document.body;
            const input = document.createElement("input");
            body.append(input);
            input.style.opacity = 0;
            input.value = text;
            input.select();
            input.setSelectionRange(0, input.value.length);
            document.execCommand("Copy");
            input.blur();
            input.remove();
        }


        /**
         * 消息提示框
         * @param msg
         * @param type: default success error
         */
        function message(msg, type) {
            if (!msg) return;
            const body = document.body;
            const messageBox = document.createElement("div");
            messageBox.style.position = 'fixed';
            messageBox.style.top = '20px';
            messageBox.style.left = '0px';
            messageBox.style.right = '0px';
            messageBox.style.zIndex = 999;
            messageBox.style.fontSize = '16px';
            const message = document.createElement("div");
            switch (type || '') {
                case 'success':
                    message.style.width = '260px';
                    message.style.margin = '0 auto';
                    message.style.padding = '10px 30px';
                    message.style.border = '1px solid #e5f3da';
                    message.style.borderRadius = '5px';
                    message.style.background = '#f2f9ec';
                    message.style.color = '#7ec050';
                    break;
                case 'error':
                    message.style.width = '260px';
                    message.style.margin = '0 auto';
                    message.style.padding = '10px 30px';
                    message.style.border = '1px solid #f9e3e3';
                    message.style.borderRadius = '5px';
                    message.style.background = '#fcf1f0';
                    message.style.color = '#e47471';
                    break;
                default:
                    message.style.width = '260px';
                    message.style.margin = '0 auto';
                    message.style.padding = '10px 30px';
                    message.style.border = '1px solid #eceef5';
                    message.style.borderRadius = '5px';
                    message.style.background = '#eef2fb';
                    message.style.color = '#919399';
            }
            message.innerHTML = msg;
            messageBox.append(message);
            body.append(messageBox);
            setTimeout(() => {
                messageBox.remove();
            }, 1500);
        }

        function copy() {
            clipBoard('世界您好');
            message('复制成功', 'success');
        }
    </script>
</head>
<body>
<div class="container">
    <div>
        <div>
            <div class="card" onclick="copy()">
                <div id="text">世界您好</div>
                <div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

-GRW-

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现点击复制文本，兼容ios

最近做手机端H5网页，需要点击内容进行复制，出现ios无法复制的情况以下是效果图代码实现---新建html文件，拷贝代码，即可查看效果<!DOCTYPE html><html> <head> <title>复制</title> <meta charset="utf-8"> <meta n...
复制链接

扫一扫