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);
                    })
                })
            })
  • 相关阅读:
    Cygwin配置总结
    javap 指令集
    超好用的Vim配置
    超过 130 个你需要了解的 vim 命令
    21、面向对象
    20、MySQLdb
    深入java字符串原理及其效率分析
    数据库执行计划
    SQL中EXISTS的用法
    mybatis之foreach用法
  • 原文地址:https://www.cnblogs.com/echolife/p/9298815.html
Copyright © 2011-2022 走看看