Доступ к событию копирования в буфер обмена с помощью Javascript
В этом блоге описывается, как мы можем копировать в буфер обмена с помощью JavaScript. Копирование содержимого из веб-формы без использования функций браузера по умолчанию. Для этого я использую функциональность ZeroClipboard в JavaScript.
Ниже приведены шаги для разработки этого кода.
1. Создайте новое веб-приложение.
2. Включите файл ZeroClipboard.js в местоположение вашего веб-приложения или вы можете использовать онлайн-ссылку, указанную ниже
‹script src="http://zeroclipboard.org/ javascripts/zc/v2.1.6/ZeroClipboard.js›‹/script›
3. Вот следующий код, который вы должны добавить в скрипт, HTML и можете добавить для него стили (CSS).
<div class="email-modal">
<div >
<div role="document">
<h4>Text To Copy:</h4>
<div class="modal-body">
<textarea class="text_copy" rows="5" cols="100" >text to Copy</textarea>
</div>
<br>
<div>
<button id='clip_board' data-clipboard-text="" class="copy-button">Copy to ClipBoard</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://zeroclipboard.org/javascripts/zc/v2.1.6/ZeroClipboard.js"></script>
<script type="text/javascript">
$('#clip_board').attr('data-clipboard-text', $(".text_copy").text())
window.onload = function(){
var client = new ZeroClipboard(document.getElementsByClassName("copy-button") );
client.on( "ready", function( readyEvent ) {
client.on( "aftercopy", function( event ) {
alert("Copied.." );
});
});
}
</script>
Здесь «кнопка копирования» — это «класс кнопки», упомянутый в html, который читает содержимое вашей html-разметки.
