writeText()

writeText() — это метод объекта Clipboard, предназначенный для копирования текстовых данных в буфер обмена. Метод возвращает Promise, который завершается успешно в случае, если текст скопирован, и выдаёт ошибку, если операция не удалась.

Синтаксис

  
  navigator.clipboard.writeText('text')
  

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

clipboard — это свойство объекта navigator, которое предоставляет доступ к Clipboard API. Этот API, в свою очередь, позволяет взаимодействовать с буфером обмена операционной системы, выполняя операции вырезания, копирования и вставки.

Так как writeText() возвращает Promise, результат работы метода обрабатывают с помощью then() при успешном выполнении, и catch(), для обработки ошибок.

  
  navigator.clipboard.writeText('text')
    .then(() => {
        console.log('Скопировано')
    })
    .catch(error => {
        console.error(`Текст не скопирован ${error}`)
  })
  

Копируем текст из input по клику на кнопку

  
  <input type="text" id="copy-text">
  <button id="copy-btn">Скопировать</button>


  <script>
    let copyText = document.querySelector('#copy-text')
    document.querySelector('#copy-btn').addEventListener('click', () => {
    navigator.clipboard.writeText(copyText.value)
      .then(() => {
        console.log('Скопировано')
      })
      .catch(error => {
        console.error(`Текст не скопирован ${error}`)
      })
    })
  </script>
  

В результате получим текст из input в буфер обмена и сообщение Скопировано в console.

Попробуем скопировать текст из input при загрузке страницы.

  
  document.addEventListener("DOMContentLoaded", function() {
    let copyText = document.querySelector('#copy-text')
    navigator.clipboard.writeText(copyText.value)
      .then(() => {
          console.log('Скопировано')
      })
      .catch(error => {
          console.error(`Текст не скопирован ${error}`)
      })
  });  
  

Результатом будет следующий текст в console: Текст не скопирован. NotAllowedError: Document is not focused. Это произошло потому, что был вызван catch(), который сообщил нам о неудаче. Дело в том, что writeText() позволит скопировать текст в буфер обмена только в том случае, если данное действие инициирует сам пользователь, например, через клик мыши или нажатие клавиши, в противном случае выполнение метода завершится неудачей из-за ограничений безопасности браузера.