代码之家 › 专栏 › 技术社区 › Álvaro González

按键时将文本复制到剪贴板

clipboard.js jquery

Álvaro González · 技术社区 · 5 年前

可以使用此库绑定 复制到剪贴板 键盘快捷键?

所有的 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>

1 回复 | 直到 5 年前

Álvaro González 5 年前

我想我找到了我遗漏的要点。我基本上需要自己触发点击事件。我已经换了我的 <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)以及其他许多浏览器中都可以使用。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前