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

Это краткое руководство объясняет, как скопировать текст в буфер обмена с помощью JS (JavaScript) одним нажатием кнопки.

В примере, продемонстрированном ниже, нажмите кнопку «Copy», чтобы скопировать содержимое текстового поля в буфер обмена.

Это удобно, когда пользователям приходится копировать длинный текст.

Содержание

Структура

Создайте текстовое поле input. В качестве значения атрибута value задайте текст, который будет отображаться в поле по умолчанию. Также создайте кнопку, на которую пользователь будет нажимать, чтобы скопировать текст.

HTML

<!—- текстовое поле -->
<input id="inputText" type="text" value="A miss is as good as a mile">

<!-- кнопка -->
<button id="copyText">Copy</button>
Как копировать текст в буфер обмена с помощью JavaScript

Стили

Примените стили к текстовому полю и кнопке.

CSS

/* стили текстового поля */
#inputText {
  padding: 6px 7px;
  font-size: 15px;
}

/* стили кнопки */
#copyText {
  padding: 6px 11px;
  font-size: 15px;
  font-weight: bold;
  background-color: #121212;
  color: #efefef;
}

Скрипт

Присвоим текстовое поле и кнопку переменным text и btn. При нажатии кнопки будет вызвана функция, которая выполняет следующие две задачи:

  1. Выделяет содержимое текстового поля с помощью select(). Метод select() используется для выбора содержимого элемента.
  2. Копирует содержимое текстового поля с помощью document.execCommand("copy"). Метод execCommand() используется для выполнения команды над выбранной частью редактируемой области. В нашем случае это выполнение команды копирования.

JavaScript

/* сохраняем текстовое поле в переменную text */
var text = document.getElementById("inputText");

/* сохраняем кнопку в переменную btn */
var btn = document.getElementById("copyText");

/* вызываем функцию при нажатии на кнопку */
btn.onclick = function() {
  text.select();    
  document.execCommand("copy");
}

Подводим итоги

Вот полный код.

HTML

<!—- текстовое поле -->
<input id="inputText" type="text" value="A miss is as good as a mile">

<!-- кнопка -->
<button id="copyText">Copy</button>

CSS

/* стили текстового поля */
#inputText {
  padding: 6px 7px;
  font-size: 15px;
}

/* стили кнопки */
#copyText {
  padding: 6px 11px;
  font-size: 15px;
  font-weight: bold;
  background-color: #121212;
  color: #efefef;
}

JavaScript

/* сохраняем текстовое поле в переменную text */
var text = document.getElementById("inputText");

/* сохраняем кнопку в переменную btn */
var btn = document.getElementById("copyText");

/* вызываем функцию при нажатии на кнопку */
btn.onclick = function() {
  text.select();    
  document.execCommand("copy");
}

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