Скопировать/вырезать текст в буффер обмена
Скопировать текст в буфер:
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');
