实现代码如下：

<!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. remote: fatal: could not read Username for 'http://spapa.wicp.net:3000': No such device ors

    解决办法: git remote add origin https://{username}:{password}@github.com/{username}/project.git in my ca ...

  2. SSH用户枚举漏洞（CVE-2018-15473）原理学习

    一.漏洞简介 1.漏洞编号和类型 CVE-2018-15473 SSH 用户名(USERNAME)暴力枚举漏洞 2.漏洞影响范围 OpenSSH 7.7及其以前版本 3.漏洞利用方式 由于SSH本身的 ...

  3. vue Element-UI组件

    一.UI组件 目的: 提高开发效率, 别人提供好一切, 拿过来直接用饿了么团队开源一个基于vue组件库 Element-UI ==> pc端 文档: http://element-cn.elem ...

  4. browsersync即时刷新页面

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 官网: http://browsersync.cn/ 多个浏览器.多个设备间来 ...

  5. Visual Studio 2015打开ASP.NET MVC的View提示"Object reference not set to an instance of an object"错误的解决方案

    使用Visual Studio 2013打开没有问题,但Visual Studio 2015打开cshtml就会提示"Object reference not set to an insta ...

  6. 【CF888E】Maximum Subsequence 折半搜索

    [CF888E]Maximum Subsequence 题意:给你一个序列{ai},让你从中选出一个子序列,使得序列和%m最大. n<=35,m<=10^9 题解:不小心瞟了一眼tag就一 ...

  7. jquery如何让checkbox如何取消勾选

    1.取消勾选 $("checkbox").attr("checked", false); 2.勾选 $("checkbox").attr(& ...

  8. Oracle数据库查询表信息/列信息(列ID/列名/数据类型/长度/精度/是否可以为null/默认值/是否自增/是否是主键/列描述)

    查询表信息(表名/表描述) Select table_Name As Name,Comments As Value From User_Tab_Comments Where table_Type='T ...

  9. Sublime2或3配置R、Scala、Python交互式环境

    1.Sublime3的下载地址:http://www.sublimetext.com/3 2.刚刚安装的软件是没有PackageControl的,需要在新安装使用 (1)   以前没有安装过Packa ...

  10. 源码 <oss2.models.PutObjectResult object at 0x7f7928d0b240>

    <oss2.models.PutObjectResult object at 0x7f7928d0b240> # -*- coding: utf-8 -*- import oss2 oss ...