兼容安卓和ios实现一键复制内容到剪切板

Posted 仔行天下

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了兼容安卓和ios实现一键复制内容到剪切板相关的知识，希望对你有一定的参考价值。

实现代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>js兼容安卓和ios实现粘贴板一键复制</title>
    <style>
        html {
            color: #000;
            background: #fff;
            overflow-y: scroll;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        html * {
            outline: 0;
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: transparent
        }

        * {
            margin: 0;
            padding: 0
        }
        .content {
            width: 78.7%;
            height: 11.093rem;
            margin: 0 auto;
            background: url(‘./xxxxxx.png‘);
            background-size: 100% 100%;
            margin-top: 20%;
        }
        .onebox{
            height: 8.907rem;
        }
        .midtext{
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #4FA3FF;
            letter-spacing: 0;
            text-align: left;
            width: 66%;
            padding-top: 8.0rem;
            margin: 0 auto;
        }
        .bottbox{
            text-align: center;
            font-size: 0;
            margin-top: 0.693rem;
        }
        .one-copy{
            width: 3.467rem;
            height: 0.853rem;
        }

        /*小弹窗*/
        #message{
          width: 27%;
          height: 0.8rem;
          line-height: 0.8rem;
          bottom: 50%;
            font-size: 12px;
            color: #fff;
            z-index: 99;
            box-shadow: 0 1px 14px rgba(0,0,0,.24);
            opacity: 0;
            visibility: hidden;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            text-align: center;
            border-radius: 0.8rem;
        }
        #message.show {
            visibility: visible;
        }
        #message {
            position: fixed;
            background: rgba(0,0,0,.6);
            left: 50%;
        }
        #msgTxt{
          line-height:1.55rem;
          height: 3.1rem;
        }
        .show {
            display: block!important;
        }
    </style>

</head>
<script type="text/javascript">
    document.getElementsByTagName("html")[0].style.fontSize = (window.innerWidth / 10) + "px";
</script>

<body>
    <div class="content">
        <div class="onebox">
            <div class="midtext">https://ahhahahahhahahah</div>
        </div>
        <div class="bottbox"><img src="./ccccccc.png" class="one-copy" id="one-copy" onclick="copy()"></div>
    </div>
    <!-- 弹窗组件 -->
    <div id="message" class="show">
        <p id="mytext"></p >
    </div>
</body>
<script type="text/javascript">
    //兼容安卓和ios实现剪切板复制的方法
    function copy() {
        var message="https://ajskajskajskajskjaskajksjka";
        var input = document.createElement("input");
            input.value = message;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, input.value.length), document.execCommand(‘Copy‘);
            document.body.removeChild(input);
            //一键复制按钮变浅
            document.querySelector("#one-copy").style.opacity=‘0.5‘;
            //复制成功提示
            toast(‘复制成功‘);
    }

    //弹窗组件
    function toast(message) {
        var timer;
        document.querySelector("#message").style.opacity=‘1‘;
        document.getElementById(‘mytext‘).innerHTML=message;

        clearTimeout(timer);

        timer = setTimeout( ()=> {
             document.querySelector("#message").style.opacity=‘0‘;
        }, 2000);

      }
</script>
</html>

 

略。

以上是关于兼容安卓和ios实现一键复制内容到剪切板的主要内容，如果未能解决你的问题，请参考以下文章

复制内容到剪贴板

用js实现图片复制到剪切板的功能，兼容各种浏览器，例如IE,火狐、chome等。

js实现复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

js一键复制到剪切板

jQuery-zclip实现复制内容到剪切板

js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器