jQuery实现URL复制到剪贴板后如何让按钮文本自动恢复原状

你需要在复制成功的逻辑后添加定时器，延迟恢复按钮文本即可，修改后的完整可运行代码如下：

<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() {
    // 缓存当前点击的按钮，避免定时器内指向错误
    const $currentBtn = $(this);
    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();
    $currentBtn.text("kopiert!");
    // 2秒后恢复按钮原始文本，2000为毫秒数，可按需调整
    setTimeout(function() {
        $currentBtn.text("Link kopieren");
    }, 2000);
})
</script>

核心改动说明 #

• 用$(this)指向当前点击的复制按钮，替代全局$("button")选择器，避免误修改页面上其他按钮
• 新增setTimeout定时器，默认设置2秒后自动恢复按钮原始文本，你可以修改定时器内的2000数值调整等待时长

内容的提问来源于stack exchange，提问作者ekalem