Приветствую вас дорогие друзья! Сегодня мы рассмотрим работу с буфером обмена на javascript. Делать это можно через объект navigator.clipboard. Однако отмечу, что механизм записи текстовой информации в буфер обмена существовал еще до navigator.clipboard. Если кто не помнит, это: document.execcommand('copy'); C помощью этой строчки кода можно поместить выделенную информацию в буфер обмена. Однако обратного механизма для изъятия информации из буфера не было, так как это было угрозой безопасности для пользовательских данных. Navigator.clipboard решил эту задачу. Здесь как в работе с геолокацией у пользователя запрашивается разрешение на работу с буфером и весь процесс осуществляется только через защищенное соединение https. Вот сейчас, все нюансы мы рассмотрим. Поехали!

Первое что необходимо сделать это проверить поддержку в браузере.

if (navigator.clipboard) {
   console.log("Clipboard api поддерживается!");
} else {
  console.log("Clipboard api не поддерживается!");
}

Если Clipboard api у вас не поддерживается, возможно вас стоит сменить браузер и проверить чтобы соединение было https. На htpp данный api работать не будет.

Далее после того как проверка успешно была пройдена, переходим к работе.

Начнем с чтения информации из буфера обмена:

navigator.clipboard.readText().then(text => {
    	console.log(text);
  })
  .catch(err => {
        console.log('К сожалению не удалось взять текст из буффера', err);
  });

Сделать это можно через метод readText(), на выходе вернется объект promise. В консоль выведутся данные взятые из буфера или ошибка.

Однако, если мы запустим скрипт в таком виде у нас в любом случае вернется ошибка, так как запускать методы данного api можно только если пользователь совершил какое либо действие(событие). Не вопрос! Создадим кнопку, и повесим на нее обработчик:

<button >Получить информацию из буфера обмена</button>
<script>
document.querySelector('button').addEventListener('click', function(){
    navigator.clipboard.readText().then(text => {
    	console.log(text);
    }).catch(err => {

        console.log('К сожалению не удалось взять текст из буффера', err);
    });
 });
</script>

Результат работы данного скрипта:

Мы видим что в начале при нажатии кнопки "Получить информацию из буфера обмена" у нас всплывает уведомление на разрешение доступа к буферу обмена(это для безопасности). И в итоге при каждом нажатии на кнопку в консоль браузера выводятся данные которые мы скопировали в буфер.

Это значит что Clipboard api работает и теперь мы можем получать текстовую информацию прямо из буфера обмена. Отмечу что только ТЕКСТОВУЮ!

Теперь, рассмотрим обратную операцию, запись данных в буфер.

navigator.clipboard.writeText("Текст записанный в буфер!")
  .then(() => {
    	console.log('Текст записан в буффер');
  	}).catch(err => {
		console.error('К сожалению текст не был записан в буффер: ', err);
});

Запись осуществляется с помощью метода writeText(). В результате данные записываются в буфер или выводится ошибка в консоль.

Здесь нам также необходимо обращаться к методу при действии пользователя.

Напишем интересный скрипт:

<textarea id="text" onkeydown="event.keyCode === 13 ? writeBuffer(this) : '';" placeholder="Записать информацию в буфер обмена!"><textarea>
<script>
function writeBuffer(el){
  navigator.clipboard.writeText(el.value)
    .then(() => {
      console.log('Текст записан в буффер');
      el.value = "";
    })
    .catch(err => {
      console.error('К сожалению текст не был записан в буффер: ', err);
    });
}
</script>

И посмотрим на его работу:

Данные введенные в текстовое поле после нажатия клавиши Enter записываются в буфер обмена. Заметьте что здесь уже браузер не спрашивает у нас разрешения на работу с буфером, так как эта операция считается безопасной. В итоге данные записываются в буфер обмена.

В общем теперь вы знаете как можно работать с буфером обмена в браузере через javascript. Надеюсь эта статья была для вас полезна и познавательна.

Не забудьте подписаться на мою группу в Вконтакте и канал youtube.

C вами был Грибин Андрей. Желаю вам удачи и успехов! Пока.