• ClipboardJS——开发学习总结1


    问题需求描述:

    由于是公司内部app,无法在app内复制、甚至截图,涉及安全隐私。

    app内嵌H5页面,通过使用复制按钮,实现文本复制!

    解决方法:

    ClipboardJS,一款将文本复制到剪贴板的js插件,不使用flash,最小仅3k

    1.使用方式:

    npm安装:npm i clipboard --save

    CDN安装:<script src="dist/clipboard.min.js"></script>

    2.创建clipboard.js实例,通过传递 DOM 选择器、HTML 元素或 HTML 元素列表创建

    <div id="temp_text">我是需要被复制的文字</div>

    <button class="copy_btn" data-clipboard-target="#temp_text">一键复制</button>

    var clipboard = new Clipboard('.copy_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);

    });

    3. 其他属性说明

     data-clipboard-target:触发器元素的 data-clipboard-target 属性中包含的值需要与另一个元素的选择器相匹配

    <div id="temp_text">我是需要被复制的文字</div>

    <button class="copy_btn" data-clipboard-target="#temp_text">一键复制</button>

    data-clipboard-text:不一定非要从另一个元素复制其内容。 也可以只在触发器元素中包含一个 data-clipboard-text 属性并复制该属性的内容

    <button class="copy_btn" data-clipboard-text="我是被复制的文字">我复制我自己属性里的文字</button>

    data-clipboard-action:指定是要复制还是剪切内容,值为 cut 表示执行剪切操作。如果省略此属性,默认情况下将使用复制

    <div id="temp_text">我是需要被复制的文字</div>

    <button class="copy_btn" data-clipboard-target="#temp_text" data-clipboard-action="cut">一键剪切</button>

  • 相关阅读:
    python request post from 提交表单
    不可变集合的详细概述
    华为云国际版实名账号:亚太已发展超2500个本地生态伙伴 超50%收入由伙伴创造
    iOS代码混淆和加固技术详解
    会议OA项目(送审后审批人签字功能)
    工业物联网关-整体框架
    React高阶组件(Higher-Order Components, HOCs)
    k8s HPA(HorizontalPodAutoscaler)--自动水平伸缩
    CSDN每日一题学习训练——Python版(新浪微博热门话题、Z 字形变换)
    前端缓存技术
  • 原文地址:https://blog.csdn.net/Mr_LiuP/article/details/125498720