2

Есть блок в который через бекенд передается значение

<div   id="tech-inf" class="tech_info" data-help="Select to copy">
              {{ pw.account_info_config|tojson }}

как сделать на js или jquery что бы я смог по нажатию на блок скопировать тект который приходит мне?

$("#tech-inf").click(function () {
  CopyToClipboard('info_tech');
});
function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}

так не работает(

2
  • 1
    Что-то похожее, может быть поможет: stackoverflow.com/questions/22581345/… Commented 3 мая 2018 в 9:24
  • 1
    Для начала имя функции в объявлении и в вызове клика разные. CopyToClipboard !== copyToClipboard
    – bonusrk
    Commented 3 мая 2018 в 9:25

4 ответа 4

6

Вопрос много просматривают, поэтому соберу сюда более общие примеры.


Для копирования существует метод document.execCommand('copy'), он копирует текущий выделенный текст на странице, если был вызван пользователем (например, при клике). Т.е. не получится просто запустить скрипт на странице и подсунуть любому посетителю текст без его ведома.

Выделение текста непосредственно из блока достаточно муторно: https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard

А для элементов <textarea> и <input> есть простой метод .select()

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

function copyToClipboard(str) {
  var area = document.createElement('textarea');

  document.body.appendChild(area);  
    area.value = str;
    area.select();
    document.execCommand("copy");
  document.body.removeChild(area);  
}

Далее, захочется как-то оповестить человеку, что копирование сработало. Это тоже может быть в виде функции, которая получает кнопку, меняет её детали, а через пару секунд возвращает всё на место. Примерно так:

function ui_copyDone(btn) {
  var contentSaved = btn.innerHTML;

  btn.innerHTML = 'Скопирова<span style="color: red;">но</span>';
  btn.classList.add('copied'); // уже в CSS к классу .copied дописать любые детали

  setTimeout(function() {
    btn.innerHTML = contentSaved;
    btn.classList.remove('copied');
  }, 1500);
}

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

На jQuery:

$('.js-copy').on('click', function() {
  copyToClipboard( $(this).text() );
  ui_copyDone( this ); 
  // this → объект, в контексте которого вызвана функция (здесь: кликнутый HTML элемент
  // $(this) → оно же, завернутое в jQuery-объект.
});

$('.js-copy-btn').each(function(index) {
  $(this).on('click', function() {    
    copyToClipboard( $('.js-copy-target').eq(index).text() );
    ui_copyDone( this );
  });  
  // this → очередной элемент, который перебираем
  // index → его номер, который совпадает с номером блока, откуда нужно копировать
});

/***/

function copyToClipboard(str) {
  var area = document.createElement('textarea');

  document.body.appendChild(area);
    area.value = str;
    area.select();
    document.execCommand("copy");
  document.body.removeChild(area);
}

function ui_copyDone(btn) {
  var contentSaved = btn.innerHTML;
  
  btn.innerHTML = 'Скопирова<span style="color: red;">но</span>';
  btn.classList.add('copied');
  
  setTimeout(function() {
    btn.innerHTML = contentSaved;
    btn.classList.remove('copied');
  }, 1500);
}
.box {
  border: 2px solid orange;
  padding: 4px;
  margin: 4px;
  cursor: pointer;
}

.copied {
  border-color: #045acf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="js-copy box">1. Кликни и копируй меня!</div>
<div class="js-copy box">2. Кликни и копируй меня!</div>

<hr>

<div class="js-copy-target box">1 1 1 1</div>
<button class="js-copy-btn">Скопировать</button>

<div class="js-copy-target box">2 2 2 2</div>
<button class="js-copy-btn">Скопировать</button>

И то же самое без jQuery:

setAutoCopyFeatures()

/***/

function setAutoCopyFeatures() {
  onclick_copySelf(); /* class="js-copy" */
  onclick_copyFrom(); /* class="js-copy-btn", "js-copy-target" */
  
  // Открыл функцию - сразу видно, что она делает
  // Не вдаваясь в подробности, можно вспомнить, какие классы нужно добавить в HTML  
  
  function onclick_copySelf() {
    let copy = document.querySelectorAll('.js-copy');
    
    for( let i = 0; i < copy.length; i++ ) {
      copy[i].addEventListener('click', function() {        
        copyToClipboard( this.textContent );
        ui_copyDone( this );
      });
    }
  }
  
  function onclick_copyFrom() {
    let btn = document.querySelectorAll('.js-copy-btn');
    
    for( let i = 0; i < btn.length; i++ ) {
      btn[i].addEventListener('click', function() {
        let div = document.querySelectorAll('.js-copy-target');
        
        copyToClipboard( div[i].textContent );
        ui_copyDone( this );
      });
    }
  }
  
  /***/

  function copyToClipboard(str) {
    var area = document.createElement('textarea');

    document.body.appendChild(area);
    area.value = str;
    area.select();
    document.execCommand("copy");
    document.body.removeChild(area);
  }

  function ui_copyDone(btn) {
    var contentSaved = btn.innerHTML;

    btn.innerHTML = 'Скопирова<span style="color: red;">но</span>';
    btn.classList.add('copied');

    setTimeout(function() {
      btn.innerHTML = contentSaved;
      btn.classList.remove('copied');
    }, 1500);
  }
}
.box {
  border: 2px solid orange;
  padding: 4px;
  margin: 4px;
  cursor: pointer;
}

.copied {
  border-color: #045acf;
}
<div class="js-copy box">1. Кликни и копируй меня!</div>
<div class="js-copy box">2. Кликни и копируй меня!</div>

<hr>

<div class="js-copy-target box">1 1 1 1</div>
<button class="js-copy-btn">Скопировать</button>

<div class="js-copy-target box">2 2 2 2</div>
<button class="js-copy-btn">Скопировать</button>

1

введите сюда описание изображения

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);
  
  console.log(document.

}

$("#tech-inf").click(function () {
  copyToClipboard('tech-inf');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div   id="tech-inf" class="tech_info" data-help="Select to copy">
{{ pw.account_info_config|tojson }}
</div>

1

Не помню где брал код, но работает отлично.

$('#copy').on('click',function(){
  var code = document.querySelector('#text'); // #text - блок из которого нужно скопировать
  var range = document.createRange();
  range.selectNode(code);
  window.getSelection().addRange(range);

  try {
    var successful = document.execCommand('copy');
    var msg = successful?'удачно':'неудачно';
    alert('Код скопирован '+msg);
  } catch(err) {
    alert('Код не скопирован автоматически :с'+'\n'+'Попробуйте вручную');
  }
  window.getSelection().removeAllRanges();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="text">Какой-то текст который нужно скопировать</div>
<button id="copy">Скопировать текст из блока</button>

0

Думаю, так проще всего: Код

node.addEventListener('click', $e=>{
var t= $e.currentTarget;
var r = document.createRange();

r.selectNode(t);
document.getSelection().addRange(r);
document.execCommand('copy');
alert('Текст скопирован в буфер обмена');
})

Ваш ответ

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

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