Как скопировать текст в буфер обмена с помощью JS (JavaScript)
Это краткое руководство объясняет, как скопировать текст в буфер обмена с помощью JS (JavaScript) одним нажатием кнопки.
Это удобно, когда пользователям приходится копировать длинный текст.
Содержание
Структура
Создайте текстовое поле 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");
}
Комментарии
Если текст нужно скопировать не из а просто из , то этот скрипт не работает. Не подскажете, почему text.select() не выделяет по заданному id?
HTML:
input id="inputText1" type="text1" value="Копия1"
button id="copyText1">CopyCopy</button
убрал скобки вначале и конце строк, а то текст пустым вставлялся
а подскажите, как правильно добавить несколько полей для копирования?
чтобы не плодить кучу однообразного кода... типа:
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 вставлять?
это скрипт для веб-сайта, вставлять можешь куда угодно в зависимости от проекта! вешает данный скрипт на кнопку и инпут и пользователь сможет по нажатию на кнопку скопировать все поле