Как сделать так, чтобы по нажатию на кнопку, которая копирует текст, выводилось сообщение «Скопировано»?

Как изменить текст на кнопке после копирования из INPUT так, чтобы он изменился на "Скопировано"?
  • 15 января 2024 г. 10:28
Ответы на вопрос 2
Чтобы реализовать это поведение, вы можете использовать JavaScript. Предположим, у вас есть HTML страница следующего содержания:

```html
<input type="text" value="Текст для копирования" id="copyInput">
<button onclick="copyText()">Копировать</button>
```

Следующий JavaScript код будет копировать содержимое текстового поля в буфер обмена и менять текст на кнопке на "Скопировано" при клике:

```javascript
function copyText() {
    // Получаем элемент ввода
    var copyInput = document.getElementById("copyInput");

    // Выделяем текст в поле ввода
    copyInput.select();
    copyInput.setSelectionRange(0, 99999); // Для мобильных устройств

    // Копируем текст в буфер обмена
    document.execCommand("copy");

    // Ищем кнопку по тексту и меняем на "Скопировано"
    var copyButton = document.querySelector("button[onclick='copyText()']");
    if (copyButton) {
        copyButton.textContent = "Скопировано";
    }

    // Опционально: сбросить текст кнопки обратно после нескольких секунд
    setTimeout(function() {
        copyButton.textContent = "Копировать";
    }, 3000);
}
```

Добавьте вышеуказанный код в тэг `<script>` либо подключите как внешний JavaScript файл к вашей странице. Таким образом, по нажатию на кнопку "Копировать", текст из поля ввода будет скопирован в буфер обмена и текст кнопки изменится на "Скопировано". Через 3 секунды текст кнопки снова изменится на "Копировать".
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" rel="nofollow">execCommand() is deprecated</a> , поэтому предлагаю <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard" rel="nofollow">navigator.clipboard</a> : <br/>
Похожие вопросы