Question

我有一些代码可以在点击按钮使用JavaScript时复制一些文本。我想这样做，如果它被复制，它应该显示一条消息3秒钟。

我的代码

＆＃13;

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="i1" style="display: none;">Hello</p>
<button onclick="copyToClipboard('#i1')" class="btn btn-primary">
  <span class="glyphicon glyphicon-eye-open"></span>Share
</button>

＆＃13;

Answer 1

您可以使用解决方案

＆＃13;

function copyToClipboard(element) {
  var $temp = $("<input type='text'>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
  
  $('<div>Success!</div>').insertBefore('body').delay(3000).fadeOut();

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="i1" style="display: none;">Hello</p>
<button onclick="copyToClipboard('#i1')" class="btn btn-primary">
  <span class="glyphicon glyphicon-eye-open"></span>Share
</button>

＆＃13;

我已使用delay方法显示消息3秒。

希望这会对你有所帮助。

Answer 2

在我看来，问题是您已在HTML中的某个脚本标记中添加了copyToClipboard()。

肯定无法绑定哪些HTML正在呈现。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
    // SHOW SOME DIV as alert (static div hiddent in HTML)
    setTimeout(function(){
      // HIDE same DIV as alert
    }, 2000);
  }
</script>
<p id="i1" style="display: none;">Hello</p>
<button onclick="copyToClipboard('#i1')" class="btn btn-primary">
  <span class="glyphicon glyphicon-eye-open"></span>Share
</button>

Answer 3

function copyToClipboard(element) {
  var $temp =$("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  if(document.execCommand("copy")){
    alert('Copied');  $temp.remove();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="i1" style="display: none;">Hallo</p>
<button onclick="copyToClipboard('#i1')" class="btn btn-primary">
  <span class="glyphicon glyphicon-eye-open"></span>Share
</button>

复制后javascript函数的成功消息

3 个答案: