Загрузка...
Делаем копирование текста в буфер обмена, на основе document.execCommand
document.execCommand(«copy»)
Приведу сначало стандартный код без использования JQuery
<!DOCTYPE html>
<html>
<body>
<p>Нажмите на кнопку, чтобы скопировать текст из текстового поля. Попробуйте вставить текст (например, Ctrl + V) в другое окно, чтобы увидеть эффект.</p>
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<p>Метод document.execCommand () не поддерживается в IE9 и более ранних версиях.</p>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
Тут мы видим что на кнопку вешается событие onclick, которое вызывает функцию myFunction(), в которой уже и происходит копирование текста в буфер обмена.
А теперь изменим логику. Допустим нам надо скопировать текст не с input а с div.
<!DOCTYPE html>
<html>
<head>
. . .
</head>
<body>
<p>Нажмите на кнопку, чтобы скопировать текст из текстового поля. Попробуйте вставить текст (например, Ctrl + V) в другое окно, чтобы увидеть эффект.</p>
<div class="block-icons">
<ul>
<li><div class="copy-ico">111</div><div class="copy-btn">Копировать</div></li>
<li><div class="copy-ico">222</div><div class="copy-btn">Копировать</div></li>
<li><div class="copy-ico">333</div><div class="copy-btn">Копировать</div></li>
</ul>
</div>
<p>Метод document.execCommand () не поддерживается в IE9 и более ранних версиях.</p>
<script>
jQuery(document).ready(function($){
$('.block-icons ul li .copy-btn').click(function() {
var copyText = $(this).parent().find('.copy-ico').text();
var copytext2 = document.createElement('input');
copytext2.value = copyText;
document.body.appendChild(copytext2);
copytext2.select();
document.execCommand("copy");
document.body.removeChild(copytext2);
});
});
</script>
</body>
</html>
Код в работе