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

Question

我已成功安装clipboard.js 并获得了文本的 sn-ps 以在单击时复制到剪贴板。我将在表格的单元格中嵌套这些文本的 sn-ps（或它们所在的“btn”）。

我的挑战：

我需要文本的 sn-ps 来给我一个工具提示“已复制！”消息，以便人们知道他们是可点击的。 clipboard.js 文档页面就是一个很好的例子——单击任何剪切或复制按钮以查看工具提示消息。

来自 clipboard.js 的文档：

虽然 execCommand 不支持复制/剪切操作 Safari（包括移动设备），它优雅地降级，因为 支持选择。

这意味着您可以显示一个工具提示，说已复制！当成功事件是 调用并在调用错误事件时按 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>

我应该添加什么？ 谢谢！

Answer 1

我对 Zeno 的代码做了些许改进，将它包装在一个 jQuery 函数中，并支持从任意元素复制：

if (typeof $.uf === 'undefined') {
    $.uf = {};
}

$.uf.copy = function (button) {
    var _this = this;

    var clipboard = new ClipboardJS(button, {
        text: function(trigger) {
            var el = $(trigger).closest('.js-copy-container').find('.js-copy-target');
            if (el.is(':input')) {
                return el.val();
            } else {
                return el.html();
            }
        }
    });

    clipboard.on('success', function(e) {
        setTooltip(e.trigger, 'Copied!');
        hideTooltip(e.trigger);
    });

    clipboard.on('error', function(e) {
        setTooltip(e.trigger, 'Failed!');
        hideTooltip(e.trigger);
    });

    function setTooltip(btn, message) {
        $(btn)
        .attr('data-original-title', message)
        .tooltip('show');
    }
    
    function hideTooltip(btn) {
        setTimeout(function() {
            $(btn).tooltip('hide')
            .attr('data-original-title', "");
        }, 1000);
    }

    // Tooltip
    $(button).tooltip({
        trigger: 'click'
    });
};

// Link all copy buttons
$.uf.copy('.js-copy-trigger');

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form>
 <div class="form-group">
  <label>Email</label>
  <div class="input-group js-copy-container">
    <input type="text" class="form-control js-copy-target" name="email" autocomplete="off" value="example@example.com" placeholder="Email goes here" disabled>
    <span class="input-group-btn">
      <button class="btn btn-default js-copy-trigger" type="button">Copy</button>
    </span>
  </div>
 </div>
</form>

您会注意到，我们的按钮带有 js-copy-trigger 类，而要使用 js-copy-target 类复制的文本/控件。这两个都包含在一个通用的js-copy-container 类中。

这比使用id 目标要好得多，因为您经常需要生成多个复制按钮（例如，在表格中），并且ids 在页面上必须是唯一的。

Answer 2

似乎您想要做的只是将 Clipboard.js 与 Tooltip 解决方案集成。

以下是使用 Bootstrap 的工具提示完成此操作的方法。

// Tooltip

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(btn, message) {
  $(btn).tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    $(btn).tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button>
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>