实现代码如下：

<!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. JavaScript 闭包（Closure）

    闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包-无处不在  在前端编程中,使 ...

  2. ios atomic nonatomic区别

    atomic和nonatomic用来决定编译器生成的getter和setter是否为原子操作.         atomic 设置成员变量的@property属性时,默认为atomic,提供多线程安全 ...

  3. 配置java环境变量后没有生效的解决办法

    参考文章:https://blog.csdn.net/tooky_poom/article/details/60768458 系统安装了jdk1.7,环境变量正常,但是安装jdk1.8后,修改环境变量 ...

  4. RSA加密工具类（非对称加密算法）

    import com.jfinal.log.Log;import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher; ...

  5. yii---进行增删改查

    我们使用yii进行数据的增删改查: 一.新增数据 使用model::save()操作进行新增数据 $user= new User; $user->username =$username; $us ...

  6. 8.31前端 jQuery

    2018-8-31 19:52:09 周末吧这几天课看完 结束前端!然后进行Django!!! 越努力,越幸运! day56 2018-03-16 1. 内容回顾 1. 样式操作 1. 操作class ...

  7. [分布式系统学习] 6.824 LEC3 GFS 笔记

    Google File System 第三课的准备是阅读论文GFS.该论文是分布式系统中经典论文之一. 读完做一点小总结. GFS的feature 1. 非POXIS接口API,支持对文件和文件夹的创 ...

  8. 第一次php之旅

    话说起来,我也是刚接触php不久,刚开始是因为想自己做一个从前端到后台完整的网站,所以去学后台技术,在各种语言的选择中,由于php语言的简单,易学,功能强大,开发速度快等原因,最终我选择了php! 一 ...

  9. iOS UIScrollView 3种分页方法，间隔实现

    基础知识参考 http://tech.glowing.com/cn/practice-in-uiscrollview/ https://stackoverflow.com/questions/9367 ...

  10. ASP.NET IIS System.UnauthorizedAccessException: 对路径“C:\......xls”的访问被拒绝。

    问题: System.UnauthorizedAccessException: 对路径“C:\.....xls”的访问被拒绝. 背景: 项目中用到Excel导出功能,用的是Excel模板的方式来做,意 ...