zoukankan      html  css  js  c++  java
  • JavaScript复制内容到剪贴板

    移动端 需要复制内容到剪贴板时,

    clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容,

    完成一键复制淘口令的功能。

    注意使用clipborad.js时,input 元素不可隐藏,可以设置元素位置在可视区域之外。

    参考链接:

    https://github.com/axuebin/articles/issues/26

    实现代码:

    <input id="taokouling"  value="€1222€">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#taokouling" >复制淘口令</button>
            document.querySelector('.btn').addEventListener('click', () => {
    
                var clipboard = new Clipboard('.btn');
                clipboard.on('success', e => {
                    // alert(e.text)
                    $(".pop").fadeIn(500)
                    e.clearSelection();
                })
                clipboard.on('error', e => {
                    // 不支持复制
                    // alert('浏览器不支持自动复制,请手动复制微信号')
    
                    var btn = document.querySelector('.btn');
                    btn.addEventListener('click', () => {
                        var input = document.createElement('input');
                        input.setAttribute('readonly', 'readonly');
                        input.setAttribute('value', '€Up2jba6wlck€');
                        document.body.appendChild(input);
                        input.setSelectionRange(0, 9999);
                        if (document.execCommand('copy')) {
                            document.execCommand('copy');
                            $(".pop").fadeIn(500)
                        }
                        else{
                            alert('复制失败');
                        }
                        document.body.removeChild(input);
                    })
                })
            })
  • 相关阅读:
    maven解析xml+测试test+注解
    MyBatis简单了解
    获取字符串中不重复的第一个字符
    整合ssm集成框架
    Git版本控制的原理
    git优点缺点(简单介绍)
    Maven生命周期
    Maven仓库分类
    maven常用命令
    myVision云服务商业数据分析解决方案
  • 原文地址:https://www.cnblogs.com/echolife/p/9298815.html
Copyright © 2011-2022 走看看