progway — программирование, IT

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

Часто может возникнуть необходимость скопировать какое-то значение в буфер обмена, например, при нажатии на кнопку, и есть два способа сделать это:

Современный метод использует navigator.clipboard. Это браузерное API, которое предоставляет асинхронные методы для чтения и записи данных в буфер обмена

navigator.clipboard.writeText('Какой-то текст')

Этот метод прост, но есть один важный нюанс: он работает только в безопасных контекстах (например, на страницах, загруженных по HTTPS). Проверить это можно с помощью флага window.isSecureContext. Если страница не является безопасной, вызов методов из navigator.clipboard вызовет ошибку

До появления navigator.clipboard использовался метод document.execCommand('copy'). Он требует немного больше манипуляций с DOM, но работает в небезопасных контекстах и даже самых старых браузерах:

// нужно создать какой-то текстовый элемент 
// и установить ему необходимое значение
const textArea = document.createElement('textarea');
textArea.value = "Какой-то текст";

// убрать элемент куда-то далеко
textArea.style.position = 'absolute';
textArea.style.left = '-999999px;

// и добавить его в вёрстку
document.body.prepend(textArea);

// далее выделить наше поле ввода
textArea.select();

try {
  // и скопировать значение в буфер обмена
  document.execCommand('copy');
  console.log('Текст скопирован!');
} catch (err) {
  console.error('Не удалось скопировать текст: ', err);
}

// не забываем удалить элемент из вёрстки
textArea.remove()

Комбинацией обоих способов можно покрыть абсолютно все кейсы во всех браузерах:

if (navigator.clipboard && window.isSecureContext) {
  // используем navigator.clipboard
} else {
  // используем document.execCommand('copy')
}

Кратко:

— в современных браузерах используется браузерное API navigator.clipboard для взаимодействия с буфером
— в старых браузерах и на страницах, работающих по http, используется устаревший document.execCommand

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #web #javascript #theory #data

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥38👍5🐳5❤4

www.tgoop.com/prog_way_blog/341

2.04K viewsOct 18, 2024 at 10:58

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

Часто может возникнуть необходимость скопировать какое-то значение в буфер обмена, например, при нажатии на кнопку, и есть два способа сделать это:

Современный метод использует navigator.clipboard. Это браузерное API, которое предоставляет асинхронные методы для чтения и записи данных в буфер обмена

navigator.clipboard.writeText('Какой-то текст')

// нужно создать какой-то текстовый элемент 
// и установить ему необходимое значение
const textArea = document.createElement('textarea');
textArea.value = "Какой-то текст";

// убрать элемент куда-то далеко
textArea.style.position = 'absolute';
textArea.style.left = '-999999px;

// и добавить его в вёрстку
document.body.prepend(textArea);

// далее выделить наше поле ввода
textArea.select();

try {
  // и скопировать значение в буфер обмена
  document.execCommand('copy');
  console.log('Текст скопирован!');
} catch (err) {
  console.error('Не удалось скопировать текст: ', err);
}

// не забываем удалить элемент из вёрстки
textArea.remove()

if (navigator.clipboard && window.isSecureContext) {
  // используем navigator.clipboard
} else {
  // используем document.execCommand('copy')
}

Кратко:

— в современных браузерах используется браузерное API navigator.clipboard для взаимодействия с буфером
— в старых браузерах и на страницах, работающих по http, используется устаревший document.execCommand