我已经成功安装了clipboard.js，并在单击时获得了要复制到剪贴板的文本片段。我将把这些文本片段(或它们所在的"btn")嵌套在表的单元格中。
我的挑战：
我需要这些文本片段给我一个工具提示"复制！"消息，让人们知道他们是可以点击的。这方面的一个很好的例子是在clipboard.js文档页面上——单击任何剪切或复制的按钮都可以看到工具提示消息。
来自clipboard.js的文档：
尽管上不支持使用execCommand的复制/剪切操作Safari(包括移动设备)，由于支持选择。
这意味着你可以显示一个工具提示，上面写着Copied！当成功事件调用，并在调用错误事件时按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>
我应该补充什么？谢谢
似乎您只想将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>我对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目标要好得多，因为您通常需要生成多个复制按钮(例如，在一个表中)，并且id在一个页面上必须是唯一的。