【问题标题】:Add copy button in Javascript在Javascript中添加复制按钮
【发布时间】:2015-07-22 17:45:46
【问题描述】:

我正在尝试添加一个按钮,该按钮将使用 ZeroClipboard 从文本区域复制文本,但是,当我单击该按钮时,什么都没有发生,并且当我粘贴时,没有任何内容被添加到剪贴板。

var clip = new ZeroClipboard( document.getElementById("btn4"), {
  moviePath: "https://rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.swf"
} );

clip.on( "load", function(client) {
  // alert( "movie is loaded" );

  client.on( "complete", function(client, args) {
    // `this` is the element that was clicked
    this.style.display = "none";
  } );
} );
<div id ="right" style = "float:left; width: 10%; margin-left:185px; margin-top:35px">
  <button id="btn4" data-clipboard-target="block2" name ="btn4" type="button" class="btn btn-success"><i class="icon-white icon-file"></i> Copy</button>

  <script src="https://rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.js"></script>
</div>

<textarea id="block2" name="block2" style="font-family:rockwell; background-color:#D1D1D1"></textarea>

【问题讨论】:

  • 欢迎来到 Stack Overflow。请在您的问题中添加更多详细信息。你期待什么行为,你实际看到了什么?
  • 我试图让它在本地工作,但该工具可能有问题。 jsfiddle.net/c3DUZjsfiddle.net/69RLv 提供的示例在我的浏览器中不起作用,另一位成员报告说它们在 Chrome 或 FireFox 中都不起作用。联系开发人员寻求帮助。也许这个问题的一些答案可能会对你有所帮助:How do I copy to the clipboard in JavaScript?
  • 感谢您的帮助。

标签: javascript html zeroclipboard


【解决方案1】:

试试:

<script language="JavaScript">
        var copyTextareaBtn = document.querySelector('.btn4');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.block2');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
</script>

【讨论】:

    猜你喜欢
    • 2020-04-22
    • 2016-05-17
    • 2016-11-30
    • 1970-01-01
    • 2016-03-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-30
    相关资源
    最近更新 更多