ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Копирование текста в буфер обмена

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

Здесь идет краткое пояснение, которое подробно объясняет, как копировать текст в буфер обмена одним нажатием кнопки с помощью JavaScript + CSS. Вам только следует нажать кнопку, под названием "Копировать", для того, чтобы скопировать текст, который изначально размещался в поле ввода, с последствием идет в буфер обмена. Теперь можно изначально прописать значение, это может быть любым, которое представлено для всех.

Где также можете написать свой собственный текст в текстовом поле, а затем скопировать его, а это только стоит нажать на кнопку и переносить скопированный текст по месту. Это отличное решение для многих тематических сайтов, где нужно заранее все прописать, чтоб пользователь не тратил время, а по одному клику мог взять нужную ему информацию.

Также здесь нужно заметить, что представлена только функция, как вы можете оформить, то здесь вам виднее, все безусловно зависит от самого дизайн сайта. При нажатии кнопки вызовите функцию, которая выполняет следующие две задачи, это кратко про копирование прописанной текстуры, что идет в буфер обмена, где только задействован JavaScript.

1. Выберите содержимое текстового поля, написав text.select (). Select(), такой метод используется для выбора содержимого элемента, который включает в себя текстовое поле или вход.

2. При копировании идет содержимое текстового поля, написав document.execCommand («copy»). ExecCommand(), этот метод используется для выполнения команды для выбранной части редактируемой области, в нашем случае это выполнение команды копирования.

Установочный процесс:

HTML

Код

<input id="perekapirovad" type="text" value="Используем поля для вода текстуры">
<button id="skortrovan">Копировать</button>

CSS

Код

#perekapirovad {
  padding: 7px 8px;
  font-size: 15px;
}

#skortrovan {
  padding: 8px 9px;
  font-size: 14px;
  font-weight: bold;
  background-color: #1d1b1b;
  color: #fbf5f5;
}

Код

var text = document.getElementById("perekapirovad");

var btn = document.getElementById("skortrovan");

btn.onclick = function() {
text.select();
document.execCommand("copy");
}

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

Если говорить про структуру, то здесь изначально идет создание входного поля с текстом, это для, чтобы быть скопированы в качестве значения его атрибутов, а также создать кнопку, на которую пользователь будет щелкать, чтобы скопировать текст, где как уже выше сказано, относится под оформление вашего стиля.

Демонстрация

13 Июля 2019 Загрузок: 1 Просмотров: 1279 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0