主页 / 问题 / 1061689
Accepted
Frontender
Asked:2020-12-22 09:04:09 +0000 UTC2020-12-22 09:04:09 +0000 UTC

单击按钮并复制时如何选择块中的文本？

  • 772

fields 有一个方法select()，你可以这样复制：

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

是否也可以使用div'om 曲柄？

javascript

1 个回答

  1. Best Answer

    您只能从 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>

    • 2

相关问题