JavaScript-JQuery: Как копировать текст в буфер обмена по клику ❎ WpCraft

Задача. Есть рутинная задача копировать текст из одного html-документа и вставлять в определенне поля на сайте. Каждый раз неудобно выделять и нажимать Ctrl+C, когда этих строк тысячи.

Решение. Можно использовать JavaScript для облегчения этой задачи. Необходимо сделать так, чтобы по клику на строку копировалось в буфер обмена ее содержимое (текст). Естественно, нужно использовать какую-то программу из менеджеров буфера обмена (например ClipX), чтобы за раз проклацать несколько строк и можно было переходить на другую вкладку куда мы переносим текст и уже там вставляем как нужно из буфера обмена.

Решение копированя текста по клику реализуется на JavaScript с использованием JQuery. Используем Код №1. Естественно свой html-документ нужно подготовить (если данные на рабочем сайте, то можно сохранить на компьютер html-страницу и работать с ней), чтобы каждая копируемая строка (текст) находилась в каком-то теге.


<!-- Подключаем библиотеку JQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 

<!-- Скрипт копирования содержимого элементв по клику -->
<script>
	let activeClassEl;
	
	$(document).on('click', function(e) {
    console.log(e.target.innerHTML)
	var $tmp = $("<input>");
    $("body").append($tmp);
    $tmp.val($(e.target).text()).select();
    document.execCommand("copy");
    $tmp.remove();
 
	// Здесь назначаем элементу на который кликнули класс active
	if (activeClassEl){
		$(activeClassEl).removeClass('active');
		}
  $(e.target).addClass('active');
	activeClassEl = e.target;
	
	});
</script>

let activeClassEl;

$(document).on('click', function(e) {

console.log(e.target.innerHTML)

var $tmp = $("<input>");

$("body").append($tmp);

$tmp.val($(e.target).text()).select();

document.execCommand("copy");

$tmp.remove();

// Здесь назначаем элементу на который кликнули класс active

if (activeClassEl){

$(activeClassEl).removeClass('active');

}

$(e.target).addClass('active');

activeClassEl = e.target;

});

</script>

Код №1: Реализация копирования текста по клику на JavaScript с JQuery

Здесь

$(document).on('click', functio... — цепляем функцию на событие клика.
console.log(e.target.innerHTML) — чтобы можно было в консоли браузера быстро увидеть что копируется.
Блок if (activeClassEl){... ...activeClassEl = e.target; — назначаем элементу на котрый кликаем класс «active», прописав в стилях для него например background красного цвета. Чтобы было видно на каком элементе мы остановились.

☆ Скачать HTML-файл — пример реализации кода копирования по клику