Иногда в 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: Люк Слоан-Балджер
