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