Как скопировать текст в буфер обмена с помощью 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. При нажатии кнопки будет вызвана функция, которая выполняет следующие две задачи:
- Выделяет содержимое текстового поля с помощью select(). Метод select() используется для выбора содержимого элемента.
- Копирует содержимое текстового поля с помощью 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");
}