» »

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

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

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

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

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.06.2018 Просмотров: 352 Комментарий: (0)

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

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

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