web-dev-qa-db-ja.com

Clipboard.jsクリックでツールチップ+ハイライトアニメーション

clipboard.js を正常にインストールし、クリック時にクリップボードにコピーするテキストのスニペットを取得しました。これらのスニペット（またはそれらが含まれる「btn」）をテーブルのセルにネストします。

私の挑戦：

ツールチップ「コピー済み！」を表示するには、テキストのスニペットが必要です。ユーザーがクリック可能であることを認識できるようにメッセージを送信します。この良い例は、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>

何を追加すればよいですか？ありがとう！

javascriptclipboard.js
20
PercentSharp

Clipboard.jsをTooltipソリューションに統合するだけでいいようです。

ブートストラップのツールチップを使用してこれを達成する方法は次のとおりです。

// 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>
54
Zeno Rocha

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="[email protected]" 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はページ上で一意である必要があるためです。

6
alexw