实现代码如下：

<!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. 使用mimikatz获取和创建Windows凭据的工具和方法

    Mimikatz 下载地址 https://github.com/gentilkiwi/mimikatz/releases 本地凭据破解 以管理员身份运行(拿到shell提权后) mimikatz#p ...

  2. Testlink定位实例

    最近在对testlink系统上做点东西,在定位部分元素时折腾了一段时间才搞定,特此记录 如下图 要定位红色框部分 一:先分析testlink页面结构,如下 如二个frame组成,一个是titlebar ...

  3. Apache服务器301重定向去掉.html和.php

    在做优化网站的时候,会考虑到网站整站的集权: 考虑到网站可以生成静态,首先,让网站优先访问 index.html 之后考虑:去掉 .html 和 .php. 利用 .htaccess <IfMo ...

  4. CentOS环境下jdk安装部署

    1.准备jdk安装文件: 这里我使用的是 jdk-7u79-linux-x64.tar.gz 2.在 /usr/local 目录下创建 sotfware目录,并上传JDK文件: 解压文件并修改文件夹为 ...

  5. zabbix触发器表达式详解

    Zabbix触发器的语法如下: {<server>:<key>.<function>(<parameter>)}<operator>< ...

  6. Java-06-动手动脑

    1.为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不能反过来? 因为子类继承于父类,子类中有父类的对象,父类的构造方法初始化后,子类才能运行自己的构造方法 不能放过来,继 ...

  7. ubuntu16.04下安装ros-kinetic

    参考:http://wiki.ros.org/kinetic/Installation/Ubuntu 1.添加ROS软件源 ~$ sudo sh -c 'echo "deb http://p ...

  8. HDU 6278 - Just h-index - [莫队算法+树状数组+二分][2018JSCPC江苏省赛C题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6278 Time Limit: 6000/3000 MS (Java/Others) Memory Li ...

  9. GCD之各种派发

    dispatch_apply的用法 并行模拟for循环,将指定的代码循环10次,一般会把这些代码附加到一个queue上,然后在 dispatch_apply里并行 dispatch_queue_t q ...

  10. idea启动java Maven项目，出现" java: 程序包xxxx不存在"

    今天运行Maven项目的时候,出现了,Error:(19, 17) java: 程序包tracetool不存在的情况 本人的解决办法: (1)首先确保maven  pom文件不能报错,即文件上面不能有 ...