0

как сделать что бы наведении на блок, на сайте предлагало копировать текст ?

1

2 ответа 2

1

Добавим HTML:

<!-- The text field -->
<input type="text" value="Hello World" id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Вот JS (без js никак сори бро((( ):

function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

Добавь CSS по желанию Текст скопируется и выведет сообщение о копировании если не хочешь этого то убери из пункта JS

alert("Copied the text: " + copyText.value);
1

Фишка в том, что кнопка авто-копирования с помощью document.execCommand('copy') может сработать только если есть выделенный текст. А текст можно автоматически выделить с помощью select(), но только в элементах textarea или input. Поэтому в общем случае, если из какого-то блока нужно копировать текст, нужно "за кулисами" создавать textarea, запихнуть туда копируемый текст, скопировать его и благополучно удалить:

(function(){
//сохраняем в переменную кнопки class="copy", и span, который есть внутри .text (см HTML)
const copy = document.getElementsByClassName('copy');
const text = document.querySelectorAll('.text span');
//Запускаем цикл for(), который кругами будет выполнять то, что написано внутри.
//То же самое, что отдельно записать copy[0].addEv... copy[1] ... copy[2]
//for просто берет и на каждом круге дает "i" эти значения 0, 1, 2... 
for(let i = 0; i < copy.length; i++){
  copy[i].addEventListener('click', function(){//Запускаем функцию при клике
    const cop = document.createElement('textarea');//Создаем элемент
    //Делаем его значение равным тексту, который нужно копировать
    cop.value = text[i].innerText;
    //Добавляем его к body и выделяем (что равно выделению мышкой)
    document.body.appendChild(cop).select(); 
    //Когда есть выделенная область, автоматически копируем
    document.execCommand('copy');
    //Когда скопировано - можно удалить созданный элемент через remove();
    //(уберите перед ним //)
    // оставил его в виде коммента, чтобы было понятнее, что происходит на деле
    //cop.remove();

    //Чисто декорация. При клике нагляднее показываем, что что-то произошло.
    this.innerHTML = 'Скопирова<span style="color:red">но</span>';
    //После чего вешаем таймер и через 2 секунды возвращаем как было.
    setTimeout(function(){
      copy[i].innerHTML = 'Скопировать';
    },2000); 
  });
}

})();
.text {height: 80px;}
/*Изначально скрытая кнопка копирования*/
.copy {display: none; cursor: pointer; margin: 5px;}
/*При наведении на блок - показываем кнопку*/
.text:hover .copy {display: block;}
/* :hover = наведение курсора. А такая запись через пробел означает 
 * "найти .copy, который находится где-то внутри .text"
 */
<div class="text">
  <span>— Меня зовут Боби и я алкоголик.<br>— Привееет Бооооби!</span>
  <button class="copy">Скопировать</button>
</div>

<div class="text">
  <span>Дезоксирибонуклеиновая кислота</span>
  <button class="copy">Скопировать</button>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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