单击返回后更改按钮文本

Question

亲爱的 Whosebug 社区，

我有这段代码可以将 URL 复制到剪贴板。问题是，点击后它停留在“kopiert”。我想让它变回来。我知道这个问题被问了 100 次并且 Internet 上有代码。我的问题是，我不太了解编程并尝试了网络上的代码。无法实施。我真的需要帮助。真的很感谢大家。

提前致谢。

代码：

<div class="background">
<center>
  <button class="clipboard">Link kopieren</button>
</center>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();
    $("button").text("kopiert!");
})
    
</script>

Answer 1

您可以在此处使用 setTimeout() 来运行延迟一定时间的函数。例如，我们可以将您的 JavaScript 更新为：

var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
    const originalText = $("button").text();

    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();
    $("button").text("kopiert!");

    // Run something in 2.5 seconds to revert back to the button's text
    setTimeout(function() {
      $("button").text(originalText);
    }, 2500); // 2.5 seconds
})

单击返回后更改按钮文本

Change Button Text after click back

html

javascript

button

web