Chú giải công cụ + Làm nổi bật hoạt ảnh với Clipboard.js Nhấp vào

Question

Tôi đã cài đặt thành công clipboard.js và đã nhận được đoạn văn bản để sao chép vào khay nhớ tạm khi nhấp. Tôi sẽ lồng các đoạn văn bản này (hoặc "btn" vào trong) trong các ô của bảng.

Thách thức của tôi: "sao chép"

tôi cần các đoạn văn bản để cho tôi một Tooltip để mọi người biết rằng họ có thể nhấp được. Một ví dụ tuyệt vời về điều này là trên trang tài liệu clipboard.js - nhấp vào bất kỳ nút nào đã cắt hoặc sao chép để xem thông báo chú giải công cụ.

Từ tài liệu clipboard.js':

Mặc dù hoạt động sao chép/cắt với execCommand không được hỗ trợ trên Safari chưa (bao gồm cả điện thoại di động), nó duyên dáng làm thoái hóa vì Selection được hỗ trợ.

Điều đó có nghĩa là bạn có thể hiển thị chú giải công cụ cho biết Đã sao chép! khi sự kiện thành công là được gọi và nhấn Ctrl + C để sao chép khi sự kiện lỗi được gọi vì văn bản đã được chọn.

Tôi không đặc biệt giỏi ở JS (tôi mất vài giờ để thực hiện điều này). Vì vậy, tôi đang ở cuối ... đã có thể cài đặt mọi thứ trên WP, enqueue kịch bản và thêm văn bản/chức năng:

<!-- 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> 

Tôi nên thêm gì? Cảm ơn!

Answer 1

Có vẻ như tất cả những gì bạn muốn làm là tích hợp Clipboard.js với giải pháp Tooltip.

Vì vậy, đây là cách bạn có thể thực hiện điều đó bằng cách sử dụng Chú giải công cụ của 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>

Answer 2

tôi đã đi lên với một chút cải tiến mã Zeno, mà kết thúc tốt đẹp nó trong một hàm jQuery, và hỗ trợ sao chép từ một yếu tố tùy ý:

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

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

 
    var clipboard = new Clipboard(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>

Bạn sẽ nhận thấy rằng chúng tôi có nút của chúng tôi với một lớp là js-copy-trigger và văn bản/kiểm soát sẽ được sao chép với lớp js-copy-target. Cả hai gói này được bao bọc trong lớp học phổ biến js-copy-container.

Điều này tốt hơn nhiều so với sử dụng mục tiêu id, vì bạn thường cần tạo nhiều nút sao chép (ví dụ: trong bảng) và id s phải là duy nhất trên trang.