Как после клика по кнопке, которая копирует текст показать сообщение «Скопировано»?

Question

[Анастасия Foxman]

Здравствуйте. Есть вот такая конструкция:

<input id = "promocode" type="text" name="promocode" value="GOOD12" readonly="" />
<a id = "copy" >Скопировать</a>

<script>
var text = document.getElementById("promocode");
var btn = document.getElementById("copy");
btn.onclick = function() {
text.select();    
document.execCommand("copy");
}
</script>

При клике на кнопку происходит копирование из INPUT. Как сделать так, чтобы после копирования текст на кнопке изменялся на "Скопировано"?

Заранее всем спасибо!

Answer 1

[Михаил Р.]

execCommand() is deprecated, поэтому предлагаю navigator.clipboard:

<script>
  const text = document.getElementById("promocode");
  const btn = document.getElementById("copy");

  btn.addEventListener('click', () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text.value)
        .then(() => {
          btn.textContent = "Скопировано";
        })
        .catch(err => {
          console.error('ОшибкО: ', err);
        });
    } else {
      text.select();
      document.execCommand("copy");
      btn.textContent = "Скопировано";
    }
  });
</script>

Comments

[Анастасия Foxman]

Спасибо огромное!

[fkk]

Он deprecated, но работает и не имеет тех ограничений, что есть у navigator.clipboard, например. обязательный https. Лучше проверять доступность navigator.clipboard и если его нет - использовать execCommand.

[Анастасия Foxman]

Да, новое предложенное решение не работает

[Михаил Р.]

fkk, Анастасия Лисиченко добавил проверку, обновил ответ.

[Анастасия Foxman]

Михаил Р., теперь то что нужно! Спасибо!