相关疑难解决方法(0)

工具提示+使用Clipboard.js突出显示动画单击

我已成功安装了clipboard.js,并在点击后获得了要复制到剪贴板的文本片段.我将把这些文本片段(或者它们所在的"btn")嵌入到表格的单元格中.

我的挑战:

我需要文本片段给我一个工具提示"复制!" 消息,以便人们知道它们是可点击的.一个很好的例子是在clipboard.js文档页面上 - 单击任何剪切或复制的按钮以查看工具提示消息.

来自clipboard.js的文档:

虽然Safari尚不支持使用execCommand执行复制/剪切操作(包括移动设备),但由于支持选择,因此优雅地降级.

这意味着你可以显示一个工具提示说复制!调用成功事件时按Ctrl + C复制调用错误事件,因为文本已被选中.

我不是特别擅长JS(我花了几个小时才能做到这一点).所以我处于死胡同......能够在WP上安装所有内容,将脚本排队,并添加文本/功能:

 <!-- 1. Define some markup -->
    <div id="btn" data-clipboard-text="1">
        <span>text to click</span>
    </div>

    <!-- 2. Include library -->
    <script src="/path/to/dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {
    console.log(e);
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    });

    clipboard.on('error', function(e) {
        console.log(e);
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    </script>
Run Code Online (Sandbox Code Playgroud)

我应该添加什么?谢谢!

javascript clipboard.js

20
推荐指数
2
解决办法
1万
查看次数

标签 统计

clipboard.js ×1

javascript ×1