知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    js复制内容到剪贴板方案与兼容性

    作者:佳明妈 来源:郑州网站设计 2016-12-06 人气:
    js复制内容到剪贴板方案与兼容性,如果只考虑IE9以上高版本浏览器推荐使用document.execCommand或者Clipboard.js,如果你要兼容IE8或者其他低版本浏览器,那就要选择ZeroClipboard.js,当然如果你

    js复制内容到剪贴板方案与兼容性,如果只考虑IE9以上高版本浏览器推荐使用document.execCommand或者Clipboard.js,如果你要兼容IE8或者其他低版本浏览器,那就要选择ZeroClipboard.js,当然如果你要全兼容也可以用ZeroClipboard.js和另外两个配合,写个判断调用不同的插件来实现复制到剪切板。

    使用document.execCommand() 实现复制内容到剪贴板

    document.execCommand() 介绍

    在这段代码里, 其实最核心就是 document.execCommand() 方法了, 该方法的大概用途是 对选中区域 进行一些操作 有关这个方法的具体介绍,

    有关document.execCommand的介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

    document.execCommand() 实现复制js代码

    // 获取 input 元素
    var input = document.getElementById('#showLink');
    input.focus();
    input.select();
    
    // 执行复制命令
    //document.execCommand('Copy');
    try{
        if(document.execCommand('copy', false, null)){
            //success info  成功了放些提示
        } else{
            //fail info   失败了放些提示
        }
    } catch(err){
        //fail info 失败了放些提示
    }
    

    注意:input元素不能type="hidden"和display:none否则js不能监听到input.select();  兼容chrome/ FF/ IE>9/ Safari新版
     

    使用ZeroClipboard.js实现复制内容到剪贴板

    ZeroClipboard.js是一个插件,利用flash可以访问系统剪切板的功能绕过所有浏览器,实现全兼容复制粘贴方案,
    如果用户没有安装flash插件,那就不能用了,PC端的话应该不需要考虑这个问题,没有安装flash插件的用户浏览器几乎没有,移动端可能会有找不到flash插件的情况。
    兼容所有安装了flash插件的浏览器

    使用Clipboard.js实现复制内容到剪贴板

    Clipboard.js是一个纯js复制内容到剪贴板的解决方案,Clipboard.js插件兼容chrome/ FF/ IE>9/ Safari新版

    Clipboard的详细使用方法:js复制内容到剪贴板插件(clipboard.js)

    Clipboard.js示例:

    var clipboard = new Clipboard('.js-btn');
    
    //可以自己加些处理
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    

    js复制内容到剪贴板方案与兼容性

    ↓ 查看全文

    js复制内容到剪贴板方案与兼容性由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    js复制内容到剪贴板方案与兼容性-最新评论