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

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

Посмотрите сразу 2 примера, чтобы увидеть как это происходит на тестовом блоге. Скопируйте содержимое (код или текст нажав на соответствующую кнопку. Затем откройте блокнот, или черновик в блоге (любой редактор) и просто кликом мыши нажмите "ВСТАВИТЬ" или воспользоваться клавишами Ctrl + V на клавиатуре.

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

Ну и сейчас, как это реализовать на странице, если заинтересовались.

Нам нужен вот такой малюсенький код HTML

<div id=""text1"">Здесь будет  любой текст, код - то что нужно скопировать</div>
<button onclick="copytext('#text1')" id="#knopka">скопировать</button>

И вот такой JS

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

Собственно и всё. Но кнопка в таком скучном варианте (это картинка) , будет выглядеть так

И чтобы она смотрелась симпатичнее на странице можно задать ей стили CSS, как в примере, который вы видели выше. По желанию подгоните под собственный дизайн. 

Весь код целиком будет таким и его можно установить на странице в режиме HTML, заменив своим текстом то , что предназначено для копирования и надписью на кнопке.

<div id=""text1"">Здесь будет  любой текст, код - то что нужно скопировать</div>
<button onclick="copytext('#text1')" id="#knopka">скопировать</button>

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

<style>
#knopka {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
cursor:pointer;
  border: 2px solid transparent;
  border-radius: 20px
}

#knopka {
  color: #fffbfb;
  padding: 8px 15px;
  background-color: #00695C;
  border-color: #B2DFDB;
}

#knopka{
  background-color: #00BFA5;
  border-color: #c1bdbd;
  color: #fff;
}

#knopka:hover {
  color: #fff;
  background-color: #00BFA5;
  border-color: #2e6da4
}
</style>

Вот такой, достаточно распространенный вариант, использования копирование контента кликом.

Всем удачи и до встречи.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :