2

Для полей существует метод select(), и копировать можно так:

$(document).on("click", ".js-copy_button", function() {
        let copiedPassword = $(this).parent().find(".js-field");
        copiedPassword.select();
        document.execCommand("copy");
    });

Можно ли также провернуть с div'ом?

1 ответ 1

2

Копировать можно только из textarea или input. Но можно сделать запасное поле, переносить туда нужную строку и вызвать всё то же копирование.

setAutoCopy();

function setAutoCopy(){
  var $area = $('<textarea>').hide();
  $('body').append( $area );
  // Создал - добавил невидимое поле.
  
  $(".js-copy").on('click', function(){
    var txt = $(this).parent().find(".js-field").text(); // достал текст для копирования
    
    initCopy(txt); // функция получает текст - копирует. Не важно откуда.
    notifyCopied(this);
  });
  
  function initCopy(str){
    $area.show().val(str).select(); // показал, выделил
    document.execCommand("copy");   // скопировал
    $area.hide();                   // скрыл
  }
  
  function notifyCopied(elem){
    $(elem).html('Скопирова<span style="color: red;">но</span>');
    
    setTimeout(function(){ $(elem).text('Скопировать'); }, 1500);
  }
}
.js-field { margin: 5px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="js-copy">Скопировать</button>
  <div class="js-field">Тест-1</div>
</div>

<div>
  <button class="js-copy">Скопировать</button>
  <div class="js-field">Тест-2</div>
</div>

То же самое без jQuery:

setAutoCopy();

function setAutoCopy(){
  let area = display( document.createElement('textarea'), 'none' );
  document.body.appendChild(area);
  
  let copy  = document.querySelectorAll('.js-copy');
  let field = document.querySelectorAll('.js-field');
  
  for( let i = 0; i < copy.length; i++ ){
    copy[i].addEventListener('click', function(){
      initCopy( field[i].textContent );
      notifyCopied(this);
    });
  }
  
  function initCopy(str){
    display(area).value = str;
    area.select();
    document.execCommand("copy");
    display(area, 'none');
  }
  
  function notifyCopied(elem){
    elem.innerHTML = 'Скопирова<span style="color: red;">но</span>';
    
    setTimeout(function(){ elem.textContent = 'Скопировать'; }, 1500);
  }
}

function display(elem, value){
  elem.style.display = value || "block";
  return elem;
}
.js-field { margin: 5px 0; }
<div>
  <button class="js-copy">Скопировать</button>
  <div class="js-field">Тест-1</div>
</div>

<div>
  <button class="js-copy">Скопировать</button>
  <div class="js-field">Тест-2</div>
</div>

3
  • Здравствуйте и не пытайтесь спрятаться под маской я Вас все равно узнал а это значит что Вам не можно, а нужно принять участие в конкурсе ru.stackoverflow.com/questions/1061127/…
    – Leks
    Commented 22 дек. 2019 в 7:29
  • @Leks Бу. Подумаем, спасибо) Не хочется выкладывать что-то совсем плохое. А хорошее может и не получиться) Commented 22 дек. 2019 в 18:09
  • не переживайте у Вас все получится. У Вас все получится вне зависимости от результата Вы получите (+)
    – Leks
    Commented 22 дек. 2019 в 18:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.