实现代码如下：

<!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: #;

            background: #fff;

            overflow-y: scroll;

            -webkit-text-size-adjust: %;

            -ms-text-size-adjust: %;

        }

        html * {

            outline: ;

            -webkit-text-size-adjust: none;

            -webkit-tap-highlight-color: transparent

        }

        * {

            margin: ;

            padding:

        }

        .content {

            width: 78.7%;

            height: .093rem;

            margin:  auto;

            background: url('./xxxxxx.png');

            background-size: % %;

            margin-top: %;

        }

        .onebox{

            height: .907rem;

        }

        .midtext{

            font-family: PingFangSC-Regular;

            font-size: 12px;

            color: #4FA3FF;

            letter-spacing: ;

            text-align: left;

            width: %;

            padding-top: .0rem;

            margin:  auto;

        }

        .bottbox{

            text-align: center;

            font-size: ;

            margin-top: .693rem;

        }

        .one-copy{

            width: .467rem;

            height: .853rem;

        }

        /*小弹窗*/

        #message{

          width: %;

          height: .8rem;

          line-height: .8rem;

          bottom: %;

            font-size: 12px;

            color: #fff;

            z-index: ;

            box-shadow:  1px 14px rgba(,,,.);

            opacity: ;

            visibility: hidden;

            -webkit-transform: translateX(-%);

            -ms-transform: translateX(-%);

            transform: translateX(-%);

            text-align: center;

            border-radius: .8rem;

        }

        #message.show {

            visibility: visible;

        }

        #message {

            position: fixed;

            background: rgba(,,,.);

            left: %;

        }

        #msgTxt{

          line-height:.55rem;

          height: .1rem;

        }

        .show {

            display: block!important;

        }

    </style>

</head>

<script type="text/javascript">

    document.getElementsByTagName("html")[].style.fontSize = (window.innerWidth / ) + "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(, 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='';

        document.getElementById('mytext').innerHTML=message;

        clearTimeout(timer);

        timer = setTimeout( ()=> {

             document.querySelector("#message").style.opacity='';

        }, );

      }

</script>

</html>

略。

兼容安卓和ios实现一键复制内容到剪切板的更多相关文章

  1. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  2. JS禁止右键查看源码，禁止复制，复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  3. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

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

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  5. js复制内容到剪切板

    注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点  这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...

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

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

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

    jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...

  8. 在多浏览器使用JS复制内容到剪切板，无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  9. 点击复制内容到剪切板（clipboard）

    clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...

随机推荐

  1. 认识OpenStack中的flatnetwork

    目录 [隐藏] 1 Understanding FlatNetworking 1.1 FlatNetworking 1.1.1 Single Adapter, All in one setup 1.1 ...

  2. apache两种工作模式详解

    prefork模式 这个多路处理模块(MPM)实现了一个非线程型的.预派生的web服务器,它的工作方式类似于Apache 1.3.它适合于没有线程安全库,需要避免线程兼容性问题的系统.它是要求将每个请 ...

  3. hdu3507 Print Article[斜率优化dp入门题]

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  4. Node.j中path模块对路径的操作

    一.path模块 https://nodejs.org/docs/latest/api/path.html#path_path_join_paths 1.join方法 ==> 该方法将多个参数值 ...

  5. 【CF662C】Binary Table 按位处理

    [CF662C]Binary Table 题意:给你一个$n\times m$的01网格,你可以进行任意次操作,每次操作是将一行或一列的数都取反,问你最多可以得到多少个1? $n\le 20,m\le ...

  6. 在线工具-程序员的工具箱-在线Cron表达式生成器

    在线Cron表达式生成器 http://cron.qqe2.com/ 在线工具 - 程序员的工具箱 https://tool.lu/

  7. Xcode - LLDB调试技巧

    LLDB是Xcode默认的调试器,它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.平时用Xcode运行程序,实际走的都是LLDB.熟练使用LLDB,可以让你debug事半功倍. ...

  8. RabbitMQ安装详解(centos6.8)(转自：http://www.cnblogs.com/zhen-rh/p/6862350.html)

    1.下载rabbitmq安装包 2.安装erlang a.安装Erlang Solutions仓库到你的系统(目的在于让你可以使用yum安装到最新版本的erlang, 如果不设置, yum安装的erl ...

  9. 使用cv::invert()求解Mat矩阵的逆矩阵

    opencv中cv::invert()可直接用来求解矩阵的逆矩阵 函数原型如下: double cv::invert(InputArray  src, OutputArray dst, int  fl ...

  10. Solr学习笔记之6、Solr学习资源

    一.官方资源 1.官网:http://lucene.apache.org/solr/ 2.wiki:http://wiki.apache.org/solr/FrontPage 3.solr中文网:ht ...