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

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

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

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

HTML

Код
<div id="text1">1. Данный функционал позволит скопировать текст и знаки в буфер обмена.</div>
<div id="text2">2. Здесь также можете проверить, нажав на кнопку, скопировать в буфер пользователя.</div>
<button onclick="copytext('#text1')" id="kildsan">Добавляем знаки текста в буфер №1</button>
<button onclick="copytext('#text2')" id="kildsan">Добавляем знаки текста в буфер №2</button>

JS

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

Стили идут под дизайн кнопок:

CSS

Код
#kildsan {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
cursor:pointer;
  border: 1px solid transparent;
  border-radius: 4px
}

#kildsan {
  color: #fffbfb;
  padding: 8px 15px;
  background-color: #2c5590;
  border-color: #cac6c6;
}

#kildsan{
  background-color: #4179ca;
  border-color: #c1bdbd;
  color: #fff;
}

#kildsan:hover {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4
}

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

На заметку: Стилистика, что здесь предоставлена, не как не влияет на функцию, так как она идет под кнопки. Просто сделано под Demo страницу для пользователя, при проверки материала.

Также, если у вас не конструктор uCoz, то нужно подключить библиотеку для корректной работы.

Демонстрация
25 Июня 2018 Просмотров: 12309 Комментариев: (19)

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

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

Оставь свой отзыв

Комментарии: 19
Borchun
Borchun 07 Февраля 2019 00:341
0
Спасибо, дорогой товарищ! первый адекватный пример за 3 страницы гугла
Kosten
Kosten 07 Февраля 2019 00:502
0
Всегда пожалуйста, если гугл не выдает, то яндекс может быстрей найти. Хотя во многих случаях они один и тот же материал могут предложить.
arhitec
arhitec 03 Июня 2019 13:003
0
Еще бы комментарии прописать к JS - цены бы не было статье :) Например, я не могу понять что значит строка: $("<input>"), почему здесь инпут обернут как html-элемент? Если не трудно, прокомментируйте в ответе строки? За ранее спасибо!
arhitec
arhitec 03 Июня 2019 13:054
+2
Я кажется понял, что происходит в коде.
Первым делом вы добавили в страницу input тег и в него записали текст с id указанного элемента. Можно не комментировать. Хотя может кому-то и пригодится :)
Спасибо большое, действительно, перекопал море инета, прежде чем нашел толковое решение.
Kosten
Kosten 03 Июня 2019 18:175
+1
Отлично, что пригодилось это решение, и вам спасибо за пояснение.
burdinevgeny
burdinevgeny 19 Февраля 2021 18:056
0
приветствую, а как сделать так чтобы - просто нажал на кнопку и текст который скопировался. НО ПРИ ЭТОМ ЕГО НЕ ВИДНО НА СТРАНИЦЕ ?! Так можно реализовать ?! Спс.
Kosten
Kosten 19 Февраля 2021 19:349
0
Вероятно можно, разве, что знаки под фон в цветовой гамме вывевти.
burdinevgeny
burdinevgeny 19 Февраля 2021 18:217
0
не знаю правильно или нет, но скрыл с помощью display: none; 11a
burdinevgeny
burdinevgeny 19 Февраля 2021 19:138
0
нет, рано радовался ... display: none; не сработало - задача была дать пользователю скопировать хтмл код через кнопку, но не прописывать этот код на странице ... как это реализовать не подскажите ??? Оч надо !!!
burdinevgeny
burdinevgeny 19 Февраля 2021 21:1610
0
<div id="text1">ВОТ СЮДА НАДО ВСТАВИТЬ КОД HTML, который должен скопировать пользователь</div>

Но ... как только я сюда вставляю код, он тупо "срабатывает" и появляется в виде элемента на странице!!!! Как этот код сделать неактивным но доступным для скачивания ???
Kosten
Kosten 19 Февраля 2021 22:1511
0
Так говорю, что нужно знаки сделать прозрачными, и на писаного видно не будет, и при клике копируется.
burdinevgeny
burdinevgeny 19 Февраля 2021 23:1112
0
Как сделать НЕВИДИМЫМ - использовал display none, работает на ура, но проблема в том, что сам код активируется и вместо текста активная получается форма заявки. Вопрос остался в том - КАК СДЕЛАТЬ КОД НЕАКТИВНЫМ ?!
1 2 »
avatar