Копирование текста из div в буфер обмена при клике на кнопку

Разработка на Java — востребованное направление, такие специалисты будут нужны на рынке еще долго. На курсе «Java-разработчик» от Skypro освоить профессию можно с нуля за 11 месяцев, даже если вы гуманитарий и ничего не знаете об IT. Программа составлена от простого к сложному и адаптирована для новичков. Преподаватели — практикующие специалисты из крупных компаний: «Сбер», «Самокат» и других.

Часто возникает задача, когда требуется скопировать текст из определенного элемента на веб-странице в буфер обмена пользователя. Например, есть div с текстом и кнопка. При клике на кнопку текст из div должен копироваться в буфер обмена, и этот текст должен быть доступен для вставки в другое место.

<div id="myDiv">Текст для копирования</div>
<button id="copyButton">Копировать текст</button>

В этом случае можно использовать метод execCommand("copy") объекта document. Однако стоит учесть, что этот метод устарел и может быть удален из браузеров в будущем.

document.querySelector("#copyButton").addEventListener("click", function() {
    var range = document.createRange();
    range.selectNode(document.querySelector("#myDiv"));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges();
});

Более современным и предпочтительным способом является использование Clipboard API. Этот API предоставляет метод writeText(), который можно использовать для копирования текста в буфер обмена.

document.querySelector("#copyButton").addEventListener("click", function() {
    navigator.clipboard.writeText(document.querySelector("#myDiv").innerText).then(function() {
        console.log('Text copied to clipboard');
    }).catch(function(error) {
        console.error('Error:', error);
    });
});

Оба этих метода копируют текст в буфер обмена, и после их выполнения текст можно вставить в любое место, нажав сочетание клавиш Ctrl+V или команду «Вставить» в контекстном меню.

Освойте Java на курсе онлайн-университета Skypro. Учебе нужно будет уделять всего 10 часов в неделю: сможете совмещать с работой и личными делами. Вас ждут 440 часов теории и практики, мастер-классы с реальными рабочими задачами, опытные преподаватели, кураторы и наставники. За время обучения сделаете два полноценных проекта для портфолио и множество домашних заданий, чтобы отработать навыки.