Как после клика по кнопке, которая копирует текст показать сообщение «Скопировано»?
Здравствуйте. Есть вот такая конструкция:
<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 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. Как сделать так, чтобы после копирования текст на кнопке изменялся на "Скопировано"?
Заранее всем спасибо!
Дополнительно:
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> |
<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>
- Спасибо огромное!
- Он deprecated, но работает и не имеет тех ограничений, что есть у navigator.clipboard, например. обязательный https. Лучше проверять доступность navigator.clipboard и если его нет - использовать execCommand.
- Да, новое предложенное решение не работает
- fkk, Анастасия Лисиченко добавил проверку, обновил ответ.
- Михаил Р., теперь то что нужно! Спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы показать сообщение "Скопировано" после клика по кнопке, которая копирует текст, можно использовать JavaScript. Вот пример кода на JavaScript, который позволит реализовать данную функциональность:
document.addEventListener('DOMContentLoaded', function() { var copyButton = document.getElementById('copyButton'); var copyText = document.getElementById('copyText'); var message = document.getElementById('message'); copyButton.addEventListener('click', function() { copyText.select(); document.execCommand('copy'); message.innerText = 'Скопировано'; }); });
В этом коде мы сначала получаем элементы кнопки копирования (copyButton), текста для копирования (copyText) и элемента, в который мы будем выводить сообщение (message). Затем мы добавляем слушателя события 'click' на кнопку копирования. При клике на кнопку, мы выделяем текст в элементе copyText с помощью метода select(), копируем его в буфер обмена с помощью метода execCommand('copy') и устанавливаем текст сообщения 'Скопировано' в элемент message.
Теперь, после клика по кнопке копирования текста, пользователь увидит сообщение "Скопировано". Не забудьте добавить стили для сообщения, чтобы он был виден пользователю.