Скопировать/вырезать текст в буффер обмена
Скопировать текст в буфер:
navigator.clipboard.writeText('Hello Alligator!') .then(() => { // Получилось! }) .catch(err => { console.log('Something went wrong', err); });
Прочитать текст из буфера:
navigator.clipboard.readText() .then(text => { // `text` содержит текст, прочитанный из буфера обмена }) .catch(err => { // возможно, пользователь не дал разрешение на чтение данных из буфера обмена console.log('Something went wrong', err); });
Пример использования:
const readBtn = document.querySelector('.read-btn'); const writeBtn = document.querySelector('.write-btn'); const resultsEl = document.querySelector('.clipboard-results'); const inputEl = document.querySelector('.to-copy'); readBtn.addEventListener('click', () => { navigator.clipboard.readText() .then(text => { resultsEl.innerText = text; }) .catch(err => { console.log('Something went wrong', err); }) }); writeBtn.addEventListener('click', () => { const inputValue = inputEl.value.trim(); if (inputValue) { navigator.clipboard.writeText(inputValue) .then(() => { inputEl.value = ''; if (writeBtn.innerText !== 'Copied!') { const originalText = writeBtn.innerText; writeBtn.innerText = 'Copied!'; setTimeout(() => { writeBtn.innerText = originalText; }, 1500); } }) .catch(err => { console.log('Something went wrong', err); }) } });
Скопировать в буффер содержимое текстового блока (обработчик события):
function onClickClipboard(){ var eText = document.querySelector('.html-element'); var range = document.createRange(); range.selectNode(eText); window.getSelection().addRange(range); try { // Теперь, когда мы выбрали текст, выполним команду копирования var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; //~ console.log('Copy text command was ' + msg); } catch(err) { console.log('Oops, unable to copy'); } // Снятие выделения - ВНИМАНИЕ: вы должны использовать // removeRange(range) когда это возможно window.getSelection().removeAllRanges(); }
Для элементов формы можно не только скопировать, но и вырезать в буффер:
var eInp = document.querySelector('.form-element'); eInp.select(); document.execCommand('cut');