Как скопировать в буфер обмена с помощью JS и API буфера обмена

Буфер обмена — это полезная функция, которая помогает переносить данные между окном браузера в другое или в другое приложение операционной системы, используя такие операции, как вырезание, копирование и вставка. В этой статье вы узнаете, как скопировать токен API в буфер обмена с помощью JS и современного API асинхронного буфера обмена.

Как скопировать токен API

Классический сценарий, который мы все встретили в дикой природе, — это копирование токена API из формы настроек учетной записи. Я должен был реализовать подобный пример в последние недели и решил написать эту статью, чтобы показать вам пример того, как эффективно это сделать.

Существует два популярных способа копирования в буфер обмена:

• Синхронный метод execCommand () помогает манипулировать вводами редактируемой формы или элементами contentEditable .

  

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

document.execCommand ()

Используя метод execCommand () вы можете выполнять операции или команды, такие как копирование, вырезание и вставка, когда HTML-документ переключен на designMode . Если document.designMode === 'on' согласно спецификации, это означает, что весь документ доступен для редактирования.

   // Примеры операций / команд 
   документ  .   ExecCommand   (  "  копия  "  ); 
   документ  .   ExecCommand   (  "  порез  "  ); 
   документ  .   ExecCommand   (  "  вставить  "  );   

Чтобы узнать больше о синтаксисе и полном списке операций, MDN имеет полную запись о execCommand () в своих веб-документах .

navigator.clipboard

Далее вы увидите, как копировать в буфер обмена с использованием JS и современного асинхронного API буфера обмена, поскольку метод execCommand () считается устаревшим и заменяется этим новым API буфера обмена.

  

API буфера обмена добавляет в интерфейс навигатора свойство буфера обмена только для чтения которое возвращает объект буфера обмена, используемый для чтения и записи содержимого буфера обмена.

из MDN

API, интерфейс, свойство, объект… чтение и сборка всего этого могут показаться запутанными, но для простоты API буфера обмена может помочь вам вырезать, копировать и вставлять элементы на веб-странице.

Скопируйте токен API, когда щелкните

.

Следующий HTML-код может быть просто разделом на странице настроек учетной записи. Используя элементы HTML mark и code мы позаботимся о том, чтобы у нас были некоторые хорошие стандартные и родные стили, предлагаемые браузером.

  Токен API:
  
     joiSldUIFJ1bGVzISIsImlhdCI6MTQ1OTQ   
    

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

   const   токен   =   документ  .   9022 выбрать запрос ]  (  "  код  "  );   

Мы добавим JS-прослушиватель к типу события click и, прежде чем писать любые другие строки JavaScript, мы сначала проверим, доступен ли API-интерфейс буфера обмена в браузере:

   // API буфера обмена недоступен 
 маркер  .   addEventListener   (  "  нажмите  "    ()   =>   {
   if   ( !   навигатор  .   буфер обмена   ] ] {
     возвращение  ; 
  } 
});   

В конце, учитывая асинхронное поведение API буфера обмена, ознакомьтесь с полным кодом примера. Кроме того, вот демонстрация CodePen тоже.

   const   токен   =   документ  .   9022 выбрать запрос ]  (  "  код  "  ); 

 маркер  .   addEventListener   (  "  нажмите  "    async   (  событие  )   =>   { {
   if   ( !   навигатор  .   буфер обмена   ] ] {
     возвращение  ; 
  } 

   попробуй   {
     const   текст   =   событие  .   цель      InnerText  ; 
     ждут   навигатор  .   буфер обмена  .   writeText   [194590 текст  ); 
  }   вылов   (  ошибка  )   {
     консоль  .   ошибка   (  "   Сбой копирования  "  "   ошибка  ); 
  } 
});   

   См. Pen .
  API-токен Каталина Розу (@catalinred)
  на CodePen.

Чтение в буфер обмена

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

Подробнее о взаимодействии с буфером обмена, включая операции записи и чтения:

Поддержка браузера

Поддержка браузером приведенного выше кода строго связана с поддержкой Clipboard API в вашем браузере, потому что, как показывают данные Caniuse, если браузер поддерживает Clipboard API, то, скорее всего, также есть поддержка асинхронных функций JS.

Если вы нацелены на более широкую поддержку браузера для копирования в буфер обмена, вы можете использовать clipboard.js, который является 3-килобайтной сжатой библиотекой, основанной на API-интерфейсах Selection и execCommand и предлагающей очень хорошую поддержку для устаревших браузеров.