• Страница 1 из 1
  • 1
Как скопировать в буфер обмена в JavaScript
Kosten
Вторник, 03 Марта 2020, 23:22 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
В этом коротком материале мы узнаем, как копировать текст в буфер обмена, где только задействуем JavaScript. Ранее на сайте уже размещал мануал по теме, это скопировать текст в буфер обмена на JavaScript, где немного по структуре отличается от этого варианта.

При клике появиться окно с подтверждением:



Копируем в буфер обмена средствами javascript

Задача

Реализация функции копирования в буфер обмена с использованием собственного JavaScript. Нажмите на кнопку, чтобы скопировать текст из текстового поля. Попробуйте вставить текст (например, Ctrl + V) в другое окно, чтобы увидеть эффект.

HTML

Код
<!-- Текстовое поле -->
<input type="text" value="Этот текст будем копировать по клику" id="myInput">

<!-- Кнопка, используемая для копирования текста -->
<button onclick="copyText()">Copy text</button>

Вот код JavaScript

Код
function copyText() {
  /* Получить текстовое поле */
  var copyText = document.getElementById("myInput");

  /* Выберите текстовое поле */
  copyText.select();

  /* Скопируйте текст внутри текстового поля */
  document.execCommand("copy");

  /* Оповещать скопированный текст */
  alert("Copied the text: " + copyText.value);
}

Эта функция поддерживается в большинстве браузеров, включая Chrome, Firefox и Safari.

Демонстрация
Прикрепления: 6314791.png (6.7 Kb) · copy-clipboard.zip (2.3 Kb)
Страна: (RU)
Kosten
Вторник, 03 Марта 2020, 23:42 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
Также еще можете рассмотреть вариант на тему, как скопировать текст в буфер обмена по нажатию кнопки, где идет 2 кнопки, и уже копируем несколько раз. Это в том случай, если нужно скопировать информацию несколько раз, как пример, она идет в 2 варианта.



Как скопировать текст в буфер обмена по нажатию кнопки

HEAD

Код
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML

Код
<center>
<p id="p1">Привет, я ТЕКСТ 1</p>
<p id="p2">Привет, я второй текст</p><br/>

<button onclick="copyToClipboard('#p1')">Копировать текст 1</button>
<button onclick="copyToClipboard('#p2')">Копировать текст 2</button>
  
<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" />
</center>

CSS

Код
p{
  color:#000000;
  font-size:20px;
}

.textBox{
  height:30px;
  width:300px;
}

button{
  height:30px;
  width:150px;
  border-radius:8px;
  padding:10px;
  font-size:20px;
  font-family: 'Oswald', sans-serif;
  height:52px;
  cursor:pointer;
  background-color:wheat;
}

JavaScript

Код
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

На этом установка завершена!

Демонстрация
Прикрепления: button-click.zip (4.1 Kb) · 8850490.png (13.1 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: