Как делается кнопка «скопировать»?

Question

[Legal Adviser]

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


Вопрос - а как эта кнопка делается (не интересует визуальное оформление css in html)?
Можно ли только средствами css или css + js?
Или есть какие-то специальные плагины (хотя я не особо хочу нагружать сайт плагинами)?

Comments

[ForSureN1]

ну самый элементарный способ это просто взять и проэкспентировать этот элемент

[v3shin]

https://stackoverflow.com/questions/400212/how-do-...

[Ипатьев]

казалось бы - при чем тут РНР...

Answer 1

[Максим Федоров]

исчерпывающее:
https://developer.mozilla.org/en-US/docs/Mozilla/A...

Answer 2

[xIgoRx]

Можно на чистом js

<script type="text/javascript" >
function Copy(containerid) {
	    let textarea = document.createElement('textarea');
	    textarea.id = 'temp';
	    textarea.style.height = 0;
	    document.body.appendChild(textarea);
	    textarea.value = document.getElementById(containerid).innerText;
	    let selector = document.querySelector('#temp');
	    selector.select();
	    document.execCommand('copy');
	    document.body.removeChild(textarea);
}
</script>

<button onclick="Copy('toCopy')" title="Copy">Copy</button>
<div id="toCopy">text to copy!</div>

Answer 3

[Виталий Першин]

Помимо своих костылей и современного апи, есть еще библиотека clipboard.js