实现代码如下：

<!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. Unity3D 加密 Assembly-CSharp.dll (Android平台) 防止反编译【转】

    转自 http://blog.csdn.net/u013108312/article/details/54234439  

  2. shell中的环境变量：local，global，export

     1.local一般用于局部变量声明,多在在函数内部使用.实例如下:      echo_start() { local STR="$1" echo "...... ${ ...

  3. Docker制作私有的基础镜像

    debootstrap是debian/ubuntu下的一个工具,用来构建一套基本的系统(根文件系统).生成的目录符合Linux文件系统标准(FHS),即包含了/boot./etc./bin./usr等 ...

  4. Memcached存Session数据、访问安全性、使用场景总结（3）

    最近做了一个单点登录SSO,登陆后的凭证放到Memcached令牌放到Cookies:但是用户经常掉线,开发环境和测试却没有这个问题,最后从Memcached找到原因. Memcached概念.作用. ...

  5. Unity3D笔记 英保通九 创建数

    Unity中创建树:可以直接通过程序自动来创建树木还可以手动创建树木(本质上在我看来就是给程序自动创建的树动动”小手术“) 一.程序自动创建树木 3.1.层次视图中创建:一个平行光.摄像机.地.数并且 ...

  6. iOS - WKWebView的使用和长按手势识别二维码并保存

    WKWebView的图片二维码使用: .长按手势识别二维码并保存 .识别二维码跳转;不是链接显示内容点击网址跳转 .解决url包含中文不能编码的问题 .文字带链接网址,点击跳转 .纯文本-文字html ...

  7. 基于Token的多平台身份认证价格设计

    1   概述 在存在账号体系的信息系统中,对身份的鉴定是非常重要的事情. 随着移动互联网时代到来,客户端的类型越来越多, 逐渐出现了 一个服务器,N个客户端的格局 . 不同的客户端产生了不同的用户使用 ...

  8. mysql数据库恢复

    数据库恢复注意事项: # 数据恢复和字符集关联很大,如果字符集不正确会导致恢复的数据乱码. #MySQL命令和source命令恢复数据库的原理就是把文件的SQL语句,在数据库重新执行的过程. 1.利用 ...

  9. ELKStack

    ELKStack简介        对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kiban ...

  10. Git之远程仓库

    1,注册账号 登录https://github.com注册一个账号 2,上传公钥 本地CentOS使用命令 ssh-keygen -t rsa生成秘钥 复制秘钥输入到github网站 3,新建仓库 4 ...