是否可以使用此库将复制到剪贴板绑定到键盘快捷键?
所有usage examples都假定页面上有一个按钮,然后等到用户按下该按钮。但是我需要用键盘来触发它。
我的尝试甚至不会触发任何回调。我有一个触发器需要手动发出,但找不到:
jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});
textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>
答案 0 :(得分:0)
我认为我发现了我所缺少的要点。我基本上需要自己触发点击事件。我已经用更明显的替换了<div>
占位符:
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});
textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>
这在Firefox,Chrome,Edge,IE11(此浏览器要求用户许可)之类的桌面浏览器中有效,并且可能在许多其他浏览器中使用。
答案 1 :(得分:0)
没有 jQuery 的解决方案:
/** Copies a string directly to the clipboard with a simulated button click. */
const copy = s => {
const dummyButton = document.createElement('button')
const clipboard = new ClipboardJS(dummyButton, { text: () => s })
dummyButton.click()
}
// copy on keydown
window.addEventListener('keydown', e => {
if (e.key === 's') {
copy('Hello universe')
}
})
浏览器焦点将移至虚拟按钮元素,因此您可能需要在之后使用 el.focus()
恢复焦点。