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

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

копирование текста

Посмотрите сразу 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>

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

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

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

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

15 комментариев:

  1. Интересно, Виктория! Копировать и вставлять текст мы все умеем. Но у тебя, как всегда, отличная фишка. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, а ты наверное не обращала внимание на такую ? Такое копирование многие крупные сайты предлагают. присмотрись.

      Удалить
  2. Спасибо за фишку. Я не очень хочу, чтобы у меня что-то копировали. Но, возможно, когда-нибудь пригодится )))

    ОтветитьУдалить
  3. Виктория, ну да. Это в основном на тематических сайтах. Вот у меня на странице таблица цветов http://www.shpargalochki.ru/p/blog-page_5.html такая штучка работает.

    ОтветитьУдалить
  4. Я не очень понял Вашу технику, но с копированием куда угодно и откуда угодно у меня, слава Богу, проблем нет. Впрочем, поразмыслив, я понял, что интуитивно дошёл до Вашей технологии.

    ОтветитьУдалить
  5. Семён, это такая фишка для удобства пользователей, которые заходят на сайт.

    ОтветитьУдалить
  6. Вика привет! Извини, что не в тему вопрос. Вик, а можно вместо тектса в сообщении " Читать далее или "далее, еще интереснее"( ну что у кого стоит) вставить картинку. Попалась интересная картинка, да и текста меньше. Но вот как можно её вставить вместо текста?? И можно ли вообще. Я помню у тебя что =- то было на тему "далее", но не нашла у тебя..( и желательно конечно же , чтобы я не залазила в шаблон...!!!)

    ОтветитьУдалить
  7. Ирина, рада тебе. Можно картинки, но тут только в шаблоне. Вот здесь статья http://www.shpargalochki.ru/2014/04/blog-post_5783.html


    ОтветитьУдалить
  8. Ага Спасибо, Вик! Попробую... чрез шаблон

    ОтветитьУдалить
  9. Виииик,,,, А как на свою картинку получить ссылку, чтобы вставить в шаблон её код?

    ОтветитьУдалить
    Ответы
    1. Ирина, а она у тебя где. Если в компе, то загрузи в черновик блоггер и там возьми ссылку. Подробнее напишу тебе в личку как. Или картинки очень удобно хранить в гугл сайтах. Почитай http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html

      Удалить
  10. Интересная фишка, например, рецепт какой, очень удобно так копировать. Забота о читателе опять же))). Тык - и скопировал.

    ОтветитьУдалить
    Ответы
    1. Валерия, многие для кодов ставят, как я писала выше такая штука у меня на странице таблица цветов. да много куда.

      Удалить
  11. а КАК попасть в буфер обмена? Подскажите пжлста.

    ОтветитьУдалить
  12. Unknown, Гугл в помощь https://gidkomp.ru/gde-nakhoditsya-bufer-obmena/

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск