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

Посмотрите сразу 2 примера, чтобы увидеть как это происходит на тестовом блоге. Скопируйте содержимое (код или текст нажав на соответствующую кнопку. Затем откройте блокнот, или черновик в блоге (любой редактор) и просто кликом мыши нажмите "ВСТАВИТЬ" или воспользоваться клавишами Ctrl + V на клавиатуре.
Нам нужен вот такой малюсенький код HTML
<div id=""text1"">Здесь будет любой текст, код - то что нужно скопировать</div>
<button onclick="copytext('#text1')" id="#knopka">скопировать</button>
<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>
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>
<button onclick="copytext('#text1')" id="#knopka">скопировать</button>
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>
#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>
Вот такой, достаточно распространенный вариант, использования копирование контента кликом.
Всем удачи и до встречи.
оформите подписку на новые шпаргалки
Интересно, Виктория! Копировать и вставлять текст мы все умеем. Но у тебя, как всегда, отличная фишка. Спасибо!
ОтветитьУдалитьИрина, а ты наверное не обращала внимание на такую ? Такое копирование многие крупные сайты предлагают. присмотрись.
УдалитьСпасибо за фишку. Я не очень хочу, чтобы у меня что-то копировали. Но, возможно, когда-нибудь пригодится )))
ОтветитьУдалитьВиктория, ну да. Это в основном на тематических сайтах. Вот у меня на странице таблица цветов http://www.shpargalochki.ru/p/blog-page_5.html такая штучка работает.
ОтветитьУдалитьЯ не очень понял Вашу технику, но с копированием куда угодно и откуда угодно у меня, слава Богу, проблем нет. Впрочем, поразмыслив, я понял, что интуитивно дошёл до Вашей технологии.
ОтветитьУдалитьСемён, это такая фишка для удобства пользователей, которые заходят на сайт.
ОтветитьУдалитьВика привет! Извини, что не в тему вопрос. Вик, а можно вместо тектса в сообщении " Читать далее или "далее, еще интереснее"( ну что у кого стоит) вставить картинку. Попалась интересная картинка, да и текста меньше. Но вот как можно её вставить вместо текста?? И можно ли вообще. Я помню у тебя что =- то было на тему "далее", но не нашла у тебя..( и желательно конечно же , чтобы я не залазила в шаблон...!!!)
ОтветитьУдалитьИрина, рада тебе. Можно картинки, но тут только в шаблоне. Вот здесь статья http://www.shpargalochki.ru/2014/04/blog-post_5783.html
ОтветитьУдалитьАга Спасибо, Вик! Попробую... чрез шаблон
ОтветитьУдалитьВиииик,,,, А как на свою картинку получить ссылку, чтобы вставить в шаблон её код?
ОтветитьУдалитьИрина, а она у тебя где. Если в компе, то загрузи в черновик блоггер и там возьми ссылку. Подробнее напишу тебе в личку как. Или картинки очень удобно хранить в гугл сайтах. Почитай http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html
УдалитьИнтересная фишка, например, рецепт какой, очень удобно так копировать. Забота о читателе опять же))). Тык - и скопировал.
ОтветитьУдалитьВалерия, многие для кодов ставят, как я писала выше такая штука у меня на странице таблица цветов. да много куда.
Удалитьа КАК попасть в буфер обмена? Подскажите пжлста.
ОтветитьУдалитьUnknown, Гугл в помощь https://gidkomp.ru/gde-nakhoditsya-bufer-obmena/
ОтветитьУдалитьПодскажите а как реализовать, чтобы при нажатии на иконку на сайте копировать ссылку почты в буфер обмена?
ОтветитьУдалитьНичего не поняла.
УдалитьА как можно отключить копирование в буфер обмена? Например, как на этом сайте https://sitecopy.pro/articles/kak-kopirovat-v-bufer-obmena/ Как будет выглядеть подобный скрипт?
ОтветитьУдалитьАнонимный, читайте здесь http://www.shpargalochki.ru/2018/08/disable-right-click-on-your-blogger.html
ОтветитьУдалитьПривет, Вика! Давно я к тебе не заглядывал... а тут твоя шпаргалка понадобилась...😊
ОтветитьУдалитьВесь инет прорыл с утра до обеда, не мог найти нормальный, рабочий скрипт, а у тебя прям самое то...
Как всегда немного подшаманил, под свои нужды и вуаля, всё работает!😊
Твои шпаргалки выручают... Молодец!
Виктор, привет. Рада видеть тебя. Да уж не скажи.Не верю, что ты не нашёл раньше что - то подобное. Но мне всё равно приятно слышать
УдалитьБыли и другие, но идеально подошёл твой...)))))))))
ОтветитьУдалитьЯ искал, чем проще тем лучше...)))
ОК.
ОтветитьУдалить