Как скопировать текст в буфер обмена с помощью 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>

Стили

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

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");
}

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

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

Сергей Бензенкоавтор-переводчик статьи «Copying Text to Clipboard Using JavaScript»

Подписывайтесь на наши группы в социальных сетях
Подписаться
Уведомить о
5 комментариев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Константин Ольнов

Если текст нужно скопировать не из а просто из , то этот скрипт не работает. Не подскажете, почему text.select() не выделяет по заданному id?

Ali User

HTML:
input id="inputText1" type="text1" value="Копия1"
button id="copyText1">CopyCopy</button

убрал скобки вначале и конце строк, а то текст пустым вставлялся

Ali User

а подскажите, как правильно добавить несколько полей для копирования?
чтобы не плодить кучу однообразного кода... типа:

HTML:

Copy

Copy

JS:
var text1 = document.getElementById("inputText1");
var btn = document.getElementById("copyText1");
btn.onclick = function() {
text1.select();
document.execCommand("copy");}
var text2 = document.getElementById("inputText2");
var btn = document.getElementById("copyText2");
btn.onclick = function() {
text2.select();
document.execCommand("copy");}

CSS:
#inputText1 {
padding: 6px 7px;
font-size: 12px;}
#copyText1 {
padding: 6px 11px;
font-size: 15px;
font-weight: bold;
background-color: #121212;
color: #efefef;}
#inputText2 {
padding: 6px 7px;
font-size: 12px;}
#copyText2 {
padding: 6px 11px;
font-size: 15px;
font-weight: bold;
background-color: #121212;
color: #efefef;}

Александр Барс

Извиняюсь, я в JS нуб. Не подскажешь, куда надо этот код JS вставлять?

Vadim Okulik
7 месяцев назад
Ответить на  Александр Барс

это скрипт для веб-сайта, вставлять можешь куда угодно в зависимости от проекта! вешает данный скрипт на кнопку и инпут и пользователь сможет по нажатию на кнопку скопировать все поле