jquery - 按键时将文本复制到剪贴板
问题描述
可以使用此库将复制到剪贴板的内容绑定到键盘快捷键吗?
所有使用示例都假设页面上有一个按钮,并等到用户按下该按钮。但我需要用键盘触发它。
我的尝试甚至没有触发任何回调。我有一个需要手动发出的触发器,但我找不到它:
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>
解决方案
我想我找到了我遗漏的地方。我基本上需要自己触发点击事件。我<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(此浏览器要求用户许可)以及可能的许多其他浏览器。
推荐阅读
- recursion - 是否可以在 DFS 的递归求解问题中来回移动迭代器?
- java - 无法为 JRadioButton 创建和设置图标
- r - 如何在 R studio 中分配任何 Gb 的向量大小
- android - 如何在我的 android 应用程序中仅启用英文键盘?
- apache-spark - 原因:java.lang.Exception:您不能在 Spark 闭包中使用 GraphFrame 对象
- python - 如何在熊猫中复制和移动数据框
- c# - 在 Cosmos DB 中写入数据时如何拥有自己的分区键
- javascript - swift中的JavaScriptCore返回未定义
- javascript - 如何通过 web.config 更改 'url' 和 'src' 属性
- tabulator - 有没有办法将“自动完成”制表编辑器应用于标签而不是制表符单元格?