Иногда в JavaScript нам требуется скопировать текстовое содержимое в буфер обмена.
Мы можем добиться этого с помощью интерфейса буфера обмена, который реализует API буфера обмена.
Использование интерфейса буфера обмена
Интерфейс буфера обмена JavaScript можно использовать для прямого копирования в буфер обмена с помощью свойства writeText().
writeText() — это асинхронное свойство, используемое для копирования указанной текстовой строки в системный буфер обмена.
Синтаксис для writeText() выглядит следующим образом:
navigator.clipboard.writeText(clipText)
Обязательный параметр clipText — это строка, которая записывается в буфер обмена.
В результате возвращается обещание, которое разрешается, когда данные были записаны в буфер обмена, и отклоняется, если это действие не удается.
Пример кода
Ниже приведен пример кода для свойства navigator.clipboard.writeText().
В этом примере у нас есть простой HTML-код, состоящий из поля ввода с идентификатором exampleInput и кнопки, которая вызывает асинхронную функцию JavaScript copyToClipboard.
Функция copyToClipboard получает значения полей ввода с помощью метода document.getElementById().
Затем он вызывает метод select() для таргетинга и выбора поля.
Наконец, мы вызываем свойство writeText() интерфейса navigator.clipboard для асинхронного копирования выделенного текста из поля ввода в системный буфер обмена.
В случае успеха появится предупреждающее сообщение «`Скопировано: ${copyText.value}`.
В случае неудачи пользователю будет показано предупреждающее сообщение «Ошибка».
<!DOCTYPE html> <html> <body> <h1>How To Copy To Clipboard In JavaScript</h1> <p>Click on the button to copy the text from the text field.</p> <p>Then paste the text into another window to see the result.</p> <input type="text" value="Copy To Clipboard" id="exampleInput"> <button onclick="copyToClipboard()">Copy text</button> <script> const copyToClipboard = async () => { // Get the text field const copyText = document.getElementById("exampleInput") /* Select the text field */ copyText.select() await navigator.clipboard.writeText(copyText.value).then( () => alert(`Copied: ${copyText.value}`), () => alert("Failed") ) } </script> </body> </html>
Краткое содержание
Выше мы рассмотрели, как скопировать текст в буфер обмена в JavaScript.
Используя свойство writeText() интерфейса navigator.clipboard, мы можем асинхронно копировать текст в буфер обмена.
Дальнейшее чтение
Ссылки
Если у вас есть какие-либо вопросы/предложения, вы можете связаться со мной ниже:
Следуйте за мной на Medium: Люк Слоан-Балджер