This commit is contained in:
fruworg 2023-08-02 22:25:41 +06:00
parent 50b867f53e
commit 5820838ad8

View File

@ -1,14 +1,27 @@
// Получаем элементы, с которыми будем работать // Получаем все элементы с классом "highlight"
const codeElement = document.querySelector('.highlight code'); const codeElements = document.querySelectorAll('.highlight');
const spanElement = codeElement.querySelector('span span');
// Добавляем обработчик события на ::before псевдоэлемент // Добавляем обработчик события на каждый элемент с классом "highlight"
codeElement.addEventListener('click', () => { codeElements.forEach((highlightBlock) => {
// Находим элемент с тегом "code" внутри текущего блока "highlight"
const codeElement = highlightBlock.querySelector('code');
// Находим все span-элементы внутри блока
const spanElements = highlightBlock.querySelectorAll('span');
// Создаем текст, объединяя содержимое всех span-элементов внутри текущего блока "highlight"
let combinedText = '';
spanElements.forEach((spanElement) => {
combinedText += spanElement.textContent;
});
// Добавляем обработчик события на клик по элементу "code"
codeElement.addEventListener('click', () => {
// Создаем временный элемент textarea // Создаем временный элемент textarea
const tempTextarea = document.createElement('textarea'); const tempTextarea = document.createElement('textarea');
// Устанавливаем значение текста в textarea равным тексту из span // Устанавливаем значение текста в textarea равным объединенному тексту
tempTextarea.value = spanElement.textContent; tempTextarea.value = combinedText;
// Добавляем textarea в документ (необходимо, чтобы метод .select() сработал) // Добавляем textarea в документ (необходимо, чтобы метод .select() сработал)
document.body.appendChild(tempTextarea); document.body.appendChild(tempTextarea);
@ -25,4 +38,5 @@ codeElement.addEventListener('click', () => {
// Можно добавить визуальную обратную связь для пользователя, например, изменить стиль ::before // Можно добавить визуальную обратную связь для пользователя, например, изменить стиль ::before
// codeElement.style.setProperty('content', '"Copied!"'); // codeElement.style.setProperty('content', '"Copied!"');
// setTimeout(() => codeElement.style.removeProperty('content'), 1000); // setTimeout(() => codeElement.style.removeProperty('content'), 1000);
});
}); });