js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件

最新推荐文章于 2024-03-04 16:21:06 发布
最新推荐文章于 2024-03-04 16:21:06 发布
阅读量6k 收藏 8
点赞数 2
分类专栏： Javascript 文章标签： 手机浏览器兼容复制 移动端复制功能 js copy document.execCommand js .select()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42211816/article/details/81407776
版权

开发需求：手机端，点击按钮实现需复制的文本内容；
案例已做手机端浏览器兼容处理经测试，[QQ，微信，苹果，360，UC等]，可正常使用；

案例代码如下：****（使用时：请调试到手机模式）

案列1：单个复制


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="screen-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <title>手机端文案复制</title>
    <style>
        body{ max-width: 640px; margin: 0 auto;}
        .copy-pp{ color: #666; line-height: 1.2;}
        .copy-btn{ background-color: cornflowerblue; color: #fff;}
        .copy-text{ opacity: 0;}
    </style>
</head>
<body>

<!--使用时：请调试到手机模式：-->

<div class="copy-pp" id="copy-pp">
    即使是一块牛肉，也应该有自己的态度，要慎其独，要善其身，要知道精彩的人生不能只有精肉，
    还要有适宜的肥油做调配，有雪白的肉筋做环绕，并且还要掌握跳进煎锅时的角度，姿势，以及火候，
    才能最终成为一块优秀道地的西冷牛排~
</div>

<button type="button" class="copy-btn" id="copy-btn" onclick="jsCopy(this)">点击复制分享链接</button>

<textarea class="copy-text" id="copy-text" value="" readonly="readonly"></textarea>

<script>
    function jsCopy(obj){
        var u = navigator.userAgent;
        //苹果
        if (u.match(/(iPhone|iPod|iPad);?/i)) {
            var copyDOM = document.getElementById("copy-pp");  //要复制文字的节点
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(copyDOM);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');
            try {
                var msg = successful ? '成功' : '失败';
                console.log(msg);
            } catch(err) {
                console.log(err);
            }
            // 移除选中的元素
            window.getSelection().removeAllRanges();
            obj.innerHTML = '已复制';
        }

        // 安卓
        if(u.indexOf('Android') > -1 ){
            var $copyText = document.getElementById("copy-text"),
                $copyPP = document.getElementById("copy-pp");
            $copyText.innerHTML = $copyPP.innerHTML.replace(/<[^>]+>/g,"");
            $copyText.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            obj.innerHTML = '已复制';
        }
        // 安卓系统的UC浏览器
        if(u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1){
            obj.innerHTML = '点击复制分享链接';
            alert('若点击复制分享链接无效，请长按内容手动复制！');
        }
    }
</script>

</body>
</html>

案列2：多个复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="screen-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <title>手机端文案复制</title>
    <style>
        body{ max-width: 640px; margin: 0 auto;}
        ul,li{ list-style: none; padding: 0; margin: 0;}
        .copy-demo{ width: 100%; height: auto; overflow: hidden;}
        .li{ padding: 20px; border-bottom: 1px solid #f0f0f0; overflow: hidden;}
        .copy-pp{ color: #666; line-height: 1.2;}
        .copy-btn{ background-color: cornflowerblue; color: #fff;}
        .copy-text{ opacity: 0;}
    </style>
</head>
<body>

<!--使用时：请调试到手机模式：-->

<!--copy-demo-->
<section class="copy-demo">
    <ul class="ul">
        <li class="li">
            <div class="copy-pp" >
                1.上得了厅堂，下得了厨房，杀得了木马，翻得了围墙，开得了汽车，买得起洋房，斗得了小三，打得赢流氓。
            </div>
            <button type="button" class="copy-btn js-copy-btn">点击复制文字</button>
            <textarea class="copy-text" value="" readonly="readonly"></textarea>
        </li>
        <li class="li">
            <div class="copy-pp" >
                2.人的一生都会扮演很多角色，如果你不高兴，你可以把剧本扔了。不过记住，有一份剧本是真真属于你的，千万别丢错了。
            </div>
            <button type="button" class="copy-btn js-copy-btn">点击复制文字</button>
            <textarea class="copy-text" value="" readonly="readonly"></textarea>
        </li>
        <li class="li">
            <div class="copy-pp" >
                3.现在演戏的都去唱歌了，唱不了歌的都去写书了，写不了书的都去演戏了，演不了戏的就又去唱歌了。演艺圈是个圈嘛。
            </div>
            <button type="button" class="copy-btn js-copy-btn">点击复制文字</button>
            <textarea class="copy-text" value="" readonly="readonly"></textarea>
        </li>

    </ul>
</section>


<script type="text/javascript">
    // 复制文案功能:
    const jsCopy = function(obj) {

        function fn() {
            var u = navigator.userAgent;
            //苹果
            if (u.match(/(iPhone|iPod|iPad);?/i)) { //ios
                //   alert('苹果啊');
                //要复制文字的节点
                var copyDOM = obj.parentNode.children[0];

                var range = document.createRange();
                // 选中需要复制的节点
                range.selectNode(copyDOM);
                // 执行选中元素
                window.getSelection().addRange(range);
                // 执行 copy 操作
                var successful = document.execCommand('copy');
                try {
                    var msg = successful ? 'successful' : 'unsuccessful';
                    console.log('copy is' + msg);
                } catch(err) {
                    console.log('Oops, unable to copy');
                }
                // 移除选中的元素
                window.getSelection().removeAllRanges();
                obj.innerHTML = '已复制'

            }
            // 安卓
            if(u.indexOf('Android') > -1 ){
                //alert('安卓啊');
                var $copyPP = obj.parentNode.children[0],
                    $copyText = obj.parentNode.children[2];
                $copyText.innerHTML = $copyPP.innerHTML.replace(/<[^>]+>/g,"");

                $copyText.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                obj.innerHTML = '已复制';
            }
            // 安卓系统的UC浏览器
            if(u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1){
                obj.innerHTML = '点击复制文案';
                alert('若点击复制文案无效，请长按内容手动复制！');
            }
        }

        obj.addEventListener('click', fn, false);
    };

    //
    let copyBtns = document.querySelectorAll('.js-copy-btn');
    copyBtns.forEach((obj) => {
        jsCopy(obj);

    });
</script>

ps:
js复制页面内容-图片文字-插件clipboard.js
vue-仿淘宝收货地址，设置默认地址

源码会持续更新到公众号，需要可以关注一下哦…
在这里插入图片描述

阿里巴啦
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
剪贴板操作 Clipboard API 教程
liuhao9999的博客
08-02 1501
简介 浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。 一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如“一键复制”功能，用户点击一下按钮，指定的内容就自动进入剪贴板。 目前，一共有三种方法可以实现剪贴板操作。 Document.execCommand()方法 异步的 Clipboard API copy事件和paste事件 本文逐一介绍这三种方法。 Document.execCommand() 方法 Document.exec
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
01-19
两天前听了一个H5的分享，会议上有一句话，非常有感触：不是你不能，而是你对自己的要求太低。很简单的一句话，相信很多事情不是大家做不到，真的是对自己的要求太低，如果对自己要求多一点，那么你取得的进步可能会更大。成长以来，很多朋友也听说到不少激励自己上进的话，但不是每个人都能一直坚持做下来，其实，这个跟自己的性格以及周围的环境都有很大关系，只能说多找方法、条件给自己鼓励，不断提高对自己的要求，才有机会获得多一点的成就。 今年下半年打算在组内建个叫『移动开发指南』的站点，在网站框架搭建过程，有一个功能需要实现复制文本到剪贴板，相信这个功能很常用，但是对于不常写JS代码的我来说是一个比较大的挑战，回
js执行复制信息到剪切板（兼容ios）
01-03
安卓与ios的复制是存在差异的 copy(){ var tag = document.createElement('input'); tag.setAttribute('id', 'cp_input'); tag.value = val; document.getElementsByTagName('body')[0].appendChild(tag); if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios var copyDOM = document.getElem
Android如何实现复制到剪贴板
最新发布
fxjzzyo的博客
03-04 861
在 Android 开发中，可以使用 `ClipboardManager` 来复制文本到剪贴板。本文是一个简单的示例代码，演示如何将文本复制到剪贴板。
js实现复制文字到剪切板 不需要插件 兼容安卓和ios
M_Hapic的博客
03-28 813
js实现复制文字到剪切板 不需要插件 兼容安卓和ios 不想加插件，然后就上网查资料了，本来已经弄好了，结果发现ios没反应，后面又加入了兼容ios的，记录一下！ <label style="float: right;color: #C6A260;cursor:pointer;" onClick="copy_order_sn()">复制</label> //cursor:...
JS实现复制内容到剪切板，兼容PC和手机端，支持SAFARI浏览器
热门推荐
Gabriel的专栏
05-23 1万+
转自：http://www.cnblogs.com/dreambin/p/9046999.htmlJavascript原生有一些事件：copy、paste、cut，这些事件可以作用的目标元素：　　能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素)，或者是&lt;body&gt;&lt;div id="cardList"&gt; 　　&lt;div class="bt...
移动端复制功能
qq_33040483的博客
11-21 569
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0
javascript实现复制文本，兼容android和ios
dengkangning1111的博客
04-09 411
javascript实现复制文本，兼容android和ios 主要是注意，ios不支持document.execCommand("Copy")，所以可以判断一下如果不支持就用setSelectionRange方法 let element = document.getElementById("element"); let oInput = document.createElement("inp...
JS复制文字到剪切板的极简实现及扩展
aGreetSmile的博客
06-01 946
所以，创建的文本域务必要保证在屏幕区域内，否则复制行为执行的时候，会出现意料之外的体验问题（可以使用固定定位解决）。方法复制的文字内容，是无法进行修改与替换的，这其实是不友好的，因为对复制或拖拽的本文内容进行处理还是比较常见的。无需浏览器权限申请，文字内容直接进入剪切板，代码简单，使用方便，同时是异步，不用担心阻塞。日常开发，我们需要复制的内容一般是一段口令，一个链接，内容信息并不大，使用。所以，通常做法是创建一个隐藏的输入框，赋值，选中，然后复制。但是，实际开发，怎么可能让你在页面上塞一个输入框呢？
手机页面html点击按钮复制文字,html中一段js代码实现点击文字复制相应内容到剪切板...
weixin_35725147的博客
06-03 797
HTML中简单制作点击某文字直接复制内容js原理：创建一个唯一的隐藏的可复制的元素，然后调用window.getSelection()获取选中内容，再使用document.execCommand("copy")执行copyHTML部分这里写可复制内容，也可以套用到按钮等调用JS部分function copyAble(element) {var id = 'copy-able-el'var scro...
js：js复制文本到剪贴板
qq_44697303的博客
11-17 523
介绍 如果想通过原生js复制文本到剪贴板怎么操作 安排 执行如下函数 function copy(text) { var textareaEl = document.createElement('textarea'); textareaEl.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘 textareaEl.value = text; document.body.appendChild(textareaEl);
HTML5实现移动端复制功能
09-27
主要介绍了HTML5实现移动端复制功能,文中还给大家介绍了使用clipboard.js实现移动端粘贴复制功能的实现代码，需要的朋友参考下吧
h5复制到剪切板兼容ios浏览器
03-25
ios+android+h5复制剪切板
小程序兼容安卓和IOS数据处理问题及坑
10-18
主要介绍了小程序兼容安卓和IOS数据处理问题及坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原生js实现点击复制到剪切板，兼容ios苹果iphone方法
03-26 1528
前端页面要复制的内容在input输入框或者textarea文本框内，实现点击文本框将内容复制到剪切板或者点击按钮将其复制到剪切板。效果图如下，那要怎么实现呢？
HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题
dulei_start的博客
09-19 369
function copyLinkToClipBoard() { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备 window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效 var Url2=document.g...
pc、移动端适配的复制功能
cwjxyp的博客
04-03 316
可能会出现本地可以复制，发布到测试环境后无法复制的情况，是由于浏览器禁用了非安全域的 navigator.clipboard 对象。
使用原生 JS 复制文本兼容移动端 iOS & android
weixin_34290096的博客
02-21 322
注意事项 使用 JS 实现复制功能并不是很难，但是有几个需要注意的地方。 首先文本只有选中才可以复制，所以简单的做法就是创建一个隐藏的 input，然后绑定需要复制的文本。 另外如果将 input 设置为 `type="hidden" 或者 display:none 则无法选中文本，也就无法复制，可以设置 position:absolute;left:-999px; 来隐藏文本域。 const c...
js兼容安卓和IOS的复制文本到剪切板
七十多岁的人了、
11-23 1010
IOS JS复制总结
安卓和iosinput框兼容性问题
09-04
安卓和iOS的输入框兼容性问题主要涉及以下几个方面： 1. 键盘样式：安卓和iOS的键盘样式有所不同，包括键盘的外观和布局。在开发过程中，应该针对不同平台设计相应的布局和样式。 2. 输入事件：安卓和iOS的输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值