Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Буфер обмена в Javascript, navigator clipboard

Приветствую вас дорогие друзья! Сегодня мы рассмотрим работу с буфером обмена на 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 вами был Грибин Андрей. Желаю вам удачи и успехов! Пока.

Оцените статью

Еще статьи

Область видимости php

GIT для начинающих

Переменные окружения в PHP

CSS media

Атрибут autocomplete html

Тег template в html

Свойство border-image в css3

Задержки в php

Работа с датой и временем в javascript

Комментарии

Проверочный код

CreenseWrarma

[url=http://www.anellipandorasitoufficiale.com]bracciali pandora[/url] [url=http://www.yeezyboost700.us.com]yeezy 700 inertia[/url] [url=http://www.pandorasoldes-2019.fr]bracelet pandora[/url] [url=http://www.yeezyhyperspace.us]yeezy hyperspace[/url] [url=http://www.pandorabijoux2019.fr]pandora[/url] [url=http://www.pandora-akce.cz]pandora eshop[/url] [url=http://www.botyadidasyeezy.cz]boty adidas yeezy[/url] [url=http://www.yeezy--boost.fr]adidas yeezy[/url] [url=http://www.pandorabraceletus.us]pandora jewelry[/url] [url=http://www.yeezy500salt.us]yeezy 500 salt[/url] [url=http://www.yeezyclay.us]yeezy boost 350 v2 clay[/url] [url=http://www.jewelrypandoracanada.ca]pandora[/url] [url=http://www.yeezysitoufficiale.com]yeezy boost[/url] 锘縖url=http://www.canada-pandora.ca]pandora canada[/url] [url=http://www.pandorajewelrycharmsus.us]pandora[/url] [url=http://www.yeezysesame.us]yeezy sesame[/url] [url=http://www.yeezystatic.us]yeezy boost 350 v2 static[/url] [url=http://www.yeezy-350.cz]adidas yeezy boost 350 v2[/url] [url=http://www.yeezy-boost-350.fr]yeezy[/url] [url=http://www.yeezysus.us]yeezy[/url] [url=http://www.yeezysesame.us.com]yeezy sesame[/url] [url=http://www.yeezyboost500.us.com]yeezy 500 black[/url] [url=http://www.yeezyboost700.us]yeezy boost 700[/url] [url=http://www.pandorasitoufficialeonline.com]pandora sito ufficiale[/url] [url=http://www.yeezyhyperspace.us.com]yeezy hyperspace[/url] [url=http://www.sperkypandoraakce.cz]pandora cz[/url] [url=http://www.yeezystatic.us.com]yeezy static reflective[/url] [url=http://www.yeezyboostufficiale.com]yeezy[/url] [url=http://www.hogansito-ufficialeonline.com]scarpe hogan[/url] [url=http://www.hogansitoufficialeoutletonline.com]hogan online saldi 70[/url] [url=http://www.yeezyboostus.us]adidas yeezy[/url] [url=http://www.yeezybutters.us]yeezy boost 350 v2 butters[/url]

14:51 06-05-2019

CreenseWrarma

[url=http://www.anellipandorasitoufficiale.com]bracciali pandora[/url] [url=http://www.yeezyboost700.us.com]yeezy 700 inertia[/url] [url=http://www.pandorasoldes-2019.fr]bracelet pandora[/url] [url=http://www.yeezyhyperspace.us]yeezy hyperspace[/url] [url=http://www.pandorabijoux2019.fr]pandora[/url] [url=http://www.pandora-akce.cz]pandora eshop[/url] [url=http://www.botyadidasyeezy.cz]boty adidas yeezy[/url] [url=http://www.yeezy--boost.fr]adidas yeezy[/url] [url=http://www.pandorabraceletus.us]pandora jewelry[/url] [url=http://www.yeezy500salt.us]yeezy 500 salt[/url] [url=http://www.yeezyclay.us]yeezy boost 350 v2 clay[/url] [url=http://www.jewelrypandoracanada.ca]pandora[/url] [url=http://www.yeezysitoufficiale.com]yeezy boost[/url] 锘縖url=http://www.canada-pandora.ca]pandora canada[/url] [url=http://www.pandorajewelrycharmsus.us]pandora[/url] [url=http://www.yeezysesame.us]yeezy sesame[/url] [url=http://www.yeezystatic.us]yeezy boost 350 v2 static[/url] [url=http://www.yeezy-350.cz]adidas yeezy boost 350 v2[/url] [url=http://www.yeezy-boost-350.fr]yeezy[/url] [url=http://www.yeezysus.us]yeezy[/url] [url=http://www.yeezysesame.us.com]yeezy sesame[/url] [url=http://www.yeezyboost500.us.com]yeezy 500 black[/url] [url=http://www.yeezyboost700.us]yeezy boost 700[/url] [url=http://www.pandorasitoufficialeonline.com]pandora sito ufficiale[/url] [url=http://www.yeezyhyperspace.us.com]yeezy hyperspace[/url] [url=http://www.sperkypandoraakce.cz]pandora cz[/url] [url=http://www.yeezystatic.us.com]yeezy static reflective[/url] [url=http://www.yeezyboostufficiale.com]yeezy[/url] [url=http://www.hogansito-ufficialeonline.com]scarpe hogan[/url] [url=http://www.hogansitoufficialeoutletonline.com]hogan online saldi 70[/url] [url=http://www.yeezyboostus.us]adidas yeezy[/url] [url=http://www.yeezybutters.us]yeezy boost 350 v2 butters[/url]

14:51 06-05-2019

CreenseWrarma

[url=http://www.yeezystatic.us.com]yeezy boost 350 v2 static[/url] [url=http://www.anellipandorasitoufficiale.com]bracciali pandora[/url] [url=http://www.sperkypandoraakce.cz]pandora eshop[/url] [url=http://www.yeezyboostus.us]yeezy[/url] [url=http://www.yeezy-350.cz]adidas yeezy boost 350 v2[/url] [url=http://www.pandorasitoufficialeonline.com]pandora charms[/url] [url=http://www.jewelrypandoracanada.ca]pandora charms[/url] [url=http://www.yeezysus.us]yeezy boost 350[/url] [url=http://www.pandorabraceletus.us]pandora jewelry official site[/url] [url=http://www.pandorasoldes-2019.fr]bijoux pandora[/url] [url=http://www.pandorabijoux2019.fr]pandora soldes 2019[/url] [url=http://www.yeezyclay.us]yeezy clay[/url] [url=http://www.yeezyboost700.us.com]yeezy 700 salt[/url] 锘縖url=http://www.canada-pandora.ca]pandora[/url] [url=http://www.yeezysitoufficiale.com]yeezy boost 350 v2[/url] [url=http://www.yeezysesame.us.com]yeezy sesame[/url] [url=http://www.hogansito-ufficialeonline.com]hogan outlet online[/url] [url=http://www.yeezy500salt.us]yeezy 500 black[/url] [url=http://www.pandorajewelrycharmsus.us]pandora jewelry official site[/url] [url=http://www.yeezy-boost-350.fr]yeezy boost 350[/url] [url=http://www.yeezybutters.us]yeezy butters[/url] [url=http://www.yeezyhyperspace.us.com]yeezy 350 hyperspace[/url] [url=http://www.yeezyboost700.us]yeezy 700 wave runner[/url] [url=http://www.yeezyboostufficiale.com]yeezy boost 350 v2[/url] [url=http://www.yeezyboost500.us.com]yeezy 500 black[/url] [url=http://www.yeezysesame.us]yeezy boost 350 v2 sesame[/url] [url=http://www.yeezyhyperspace.us]yeezy boost 350 v2 hyperspace[/url] [url=http://www.yeezy--boost.fr]yeezy boost[/url] [url=http://www.pandora-akce.cz]pandora[/url] [url=http://www.botyadidasyeezy.cz]yeezy 350[/url] [url=http://www.yeezystatic.us]yeezy static reflective[/url] [url=http://www.hogansitoufficialeoutletonline.com]hogan sito ufficiale[/url]

11:40 23-04-2019

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

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