как сделать что бы наведении на блок, на сайте предлагало копировать текст ?
Добавим 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);
Фишка в том, что кнопка авто-копирования с помощью 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Изучал лекцию по стандартной библиотеке С++ и возник вопросХочу поддержать сигнатуру функционального объекта для ф-ии lessThan:
Есть окно MainWindow в котором есть label_1 и label_2 в label_1 каждую секунду должно прибавляться значение label_2К примеру в label_1 значение 0 а в label_2 значение...
Мне нужно считать числа до конца строки, я реализовал это с помощью cinpeek():