JavaScript - Копирование в буфер обмена

  ✎ PERSHYTUT  

Функция копирования/вставки, без сомнения, является одной из наиболее часто используемых функций в современных вычислениях и относится к процессу копирования/переноса текста или изображений из одной части компьютерного приложения в другую. Совсем недавно стало обычной практикой программно копировать некоторое содержимое в буфер обмена пользователя, чтобы ему не приходилось этого делать.

Например, коды активации и подтверждения, которые появляются на странице или в электронном письме. Вы можете копировать их автоматически или иметь кнопку, которая позволяет кому-то копировать содержимое в буфер обмена, чтобы им не приходилось копировать его самостоятельно. Кроме того, фрагменты кода — отличный пример контента, который вы можете скопировать в буфер обмена.

[Корректируйте css под свой сайт.]

Вариант 1 - JavaScript - Копирование в буфер обмена

Копирование происходит того, что расположено в элементе с id="demo" по клику на элемент с id="copyToClipboard-all" . В примере используется <textarea></textarea> куда мы пишем текст, а затем копируем по клику на <button></button>. Использовать можно любой элемент ( <button></button> <p;></p> <span></span> и т.д.) с требуемыми id. И конечно, текст у же может быть написан.

Пример для сайта

(напишите в поле ввода и нажмите на кнопку для копирования)

HTML разметка 
 
   <div class="clipboard-div">     
   <textarea class="textareaclipboard" id="demo"  rows="10" cols="50" minlength="10" maxlength="200" placeholder="(Write something here…) Напиши сюда что-нибудь..."> </textarea>     
   <button id="copyToClipboard-all" class="clipboard icon"></button>     
   </div>
JavaScript 
  
   <script>    
   /*  start */     
   document.getElementById('copyToClipboard-all').addEventListener('click', function() {     
     var text = document.getElementById('demo');     
     text.select();     
     document.execCommand('copy');     
   })     
   /*  end*/     
   </script>
CSS оформление 
  
   <style>       
   /*  start */     
   .clipboard-div{ position:relative;  background-color:#eee;  padding:2em}     
   .textareaclipboard{ min-width:20vw;  max-width:80vw;  min-height:200px;  max-height:80vh;  padding:0.8em 1em;  font-size:1em}     
   .textareaclipboard::-webkit-scrollbar{ width:4px}     
   .textareaclipboard::-webkit-scrollbar-track{ background:#f1f1f1}     
   .textareaclipboard::-webkit-scrollbar-thumb{ background:#888}     
   .textareaclipboard::-webkit-scrollbar-thumb:hover{ background:#555}     
   .clipboard.icon{ position:absolute;  top:2.3em;  right:2.5em;  margin-top:4px;  margin-left:4px;  width:11px;  height:13px;  border:solid 1px #333;  border-top:none;  border-radius:1px;  cursor:pointer}     
   .clipboard.icon:before{ top:-1px;  left:2px;  width:5px;  height:1px;  border:solid 1px #333;  border-radius:1px}     
   .clipboard.icon:after{ width:3px;  height:1px;  background-color:#333;  box-shadow:8px 0 0 0 #333}     
   .icon:before, .icon:after{ content:'';  position:absolute;  display:block}     
   /*  end*/     
   </style>
codepen 1

Вариант 2 - JavaScript - Копирование в буфер обмена

В донном примере копируется то, что расположено в элементе с class="copyt" по клику в любом месте области элемента. В примере используется <span></span> . Использовать можно любой элемент ( <button></button> <p;></p> <span></span> и т.д.) с требуемыми class или id (надо изменить в javascript).

Пример для сайта

(клик на текст для копирования)

Bitcoin: 3C268nVjEfRr6a4yCUPY4kjH6k8qP6K9vo
HTML разметка 
  
   <span class="bold">Bitcoin:</span> <span class="copyt" title="копировать">3C268nVjEfRr6a4yCUPY4kjH6k8qP6K9vo</span>
JavaScript 
 
   <script>    
   /*  start */     
   var copy = document.querySelectorAll(".copyt");      
   for (const copied of copy) {      
     copied.onclick = function() {      
       document.execCommand("copy");      
     };      
     copied.addEventListener("copy", function(event) {      
       event.preventDefault();      
      if (event.clipboardData) {      
         event.clipboardData.setData("text/plain", copied.textContent);     
         console.log(event.clipboardData.getData("text"))     
       };     
     });     
   };     
   /*  end*/     
   </script>
CSS оформление 
 
   <style>       
   /*  start */     
   .copyt{cursor: copy; overflow-wrap: break-word;word-break: break-all;border-radius: 1.8em; border: 1px solid rgba(0,83,249, 0.5);}     
   /*  end*/     
   </style>
codepen 2

Комментарии

Отправить комментарий