document.execCommand(" Copy")不复制

时间:2017-11-21 19:20:19

标签: jquery

我正在使用jquery使用户能够点击按钮来复制折扣代码。出于某种原因,document.execCommand("Copy");根本不起作用。 当我ctrl + v粘贴时,没有任何东西被复制过来。有人可以帮帮我吗? 谢谢!!



$(document).ready(function(){
$('#copyBtn').click(function(){

  console.log("loaded")
  var copyText = $('#discountCode');
  console.log($('#discountCode').text())
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.text());
})

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


	<p>Receive 20% discount on registration fees using the code: <strong><span id="discountCode">FKR2455EMSPN</span></strong></p>

	<p>
To register, you will be taken to the
SuperReturn website.
</p>
<p>
Click <button id="copyBtn">here </button> to copy our VIP code to your clipboard
</p>
<p>
Click <a href='#'>
here</a> to now be taken to the SuperReturn registration page.
</p>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

您缺少范围对象。我在下面打破了你的代码并对其进行了评论,以便你可以看到我的确切行为。

SELECT month(measured.Date) AS MONTH,
       sum(measured.used_kwh),
       sum(measured.used_E)
FROM
      (SELECT month(DATE_FORMAT(highRate.time,'%Y-%m-%d')) AS Month,

              max(highRate.Value)-min(highRate.Value) +
              max(LowRate.Value)-min(LowRate.Value) AS used_kwh,

              (max(highRate.Value)-min(highRate.Value))*0.2096 + 
              (max(LowRate.Value)-min(LowRate.Value))*0.1943 AS used_E

       FROM Item8 AS highRate
       LEFT JOIN Item7 AS LowRate ON highRate.Time = LowRate.Time
       GROUP BY Month) AS measured

GROUP BY MONTH;

您的代码无效的原因是因为它没有突出显示您要复制的项目,因此您不会复制任何内容,当您复制任何内容时,您保留的最后一个值将被保留。

希望这有帮助。

哦,当然是JSFiddle

答案 1 :(得分:1)

我们在HTML中添加了带有一个按钮的电子邮件地址,以在单击时启动复制:

 <p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>
    <p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

然后在我们的JavaScript中,我们想向按钮添加一个click事件处理程序,在该按钮中,我们从 js-emaillink 锚点中选择电子邮件地址文本,执行复制命令,以便该电子邮件地址在用户的剪贴板中,然后我们取消选择电子邮件地址,以使用户看不到选择的发生。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Select the email link anchor text
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch(err) {
    console.log('Oops, unable to copy');
  }

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported
  window.getSelection().removeAllRanges();
});

在调用document.execCommand()之前,应确保使用 document.queryCommandSupported()方法支持此API。在上面的示例中,我们可以基于以下支持来设置按钮禁用状态:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');