Follow

Напиши javascript-код, который по щелку на любой картинке на странице будет копировать в буфер ее html-атрибут title

**:**
Для реализации данной функциональности можно использовать событие "click" и метод document.execCommand() для копирования текста в буфер обмена.
Вот пример кода на JavaScript:
javascript
```
// Находим все картинки на странице
```
```
const images = document.getElementsByTagName('img');
```
```
// Добавляем обработчик события "click" для каждой картинки
```
```
for (let i = 0; i < images.length; i++) {
```
```
images[i].addEventListener('click', function() {
```
```
// Получаем значение атрибута "title"
```
```
const title = this.getAttribute('title');
```
```
// Создаем временный элемент textarea для копирования текста в буфер обмена
```
```
const tempEl = document.createElement('textarea');
```
```
tempEl.value = title;
```
```
document.body.appendChild(tempEl);
```
```
// Выделяем текст в элементе textarea
```
```
tempEl.select();
```
```
// Копируем выделенный текст в буфер обмена
```
``` document.execCommand('copy');
```
```
// Удаляем временный элемент textarea
```
```
document.body.removeChild(tempEl);
```
```
});
}
```
Этот код найдет все картинки на странице, добавит для них обработчик события "click", который при щелчке на картинке получит значение атрибута "title", скопирует его в буфер обмена и удалит временный элемент textarea.

Дальше убираем хемуляции с текстовым полем, заменив их на простое
```
navigator.clipboard.writeText(title);
```
выцепляем из кода веб-морды фрагмент с перечислением «серверных» , увеличиваем размеры и — в закладки. А, забыл, там еще в коде надо img на span поменять, потому что в html не img используется.

А это всё зачем? А затем, что в маленьком окошке не видно нихрена.

@johan В 21 веке это выглядит как-то так:

```javascript
for (let image of document.querySelector('img')) {
image.addEventListener(...);
...
}
```

@johan Там камент отредактирован же, ну :)

@johan .querySelectorAll(), а не .querySelector(). Руки не дожали… :)

@tennoseremel Кстати, Клавдия предлагает, по-моемеу, более разумный и быстрый вариант:
```
document.addEventListener('click', function(e) {
```
```
if (e.target.tagName === 'IMG') {
```
```
var title = e.target.getAttribute("title");
```
``` navigator.clipboard.writeText(title);
```
}
});
```

@johan Это означает выполнение скрипта на любой клик по странице, не только картинкам. Хотя если у тебя страница динамически изменяется аяксом, то можно.

@tennoseremel Ну, у меня на странице ТОЛЬКО картинки, так что вроде 1 слушатель и 1 функция вместо 100500 вроде логично.

@johan осталось добавить текстовое поле для url инстанса, и обращение к его api вместо хардкода списка эмодзи - и можно хостить как сервис :)

@iliazeus И, насколько я понимаю, это же можно вообще без серверной логики сделать?

@johan

iliazeus.github.io/mastodon-em

Конкретно с qoto.org сейчас может не работать - их сервер настроен немного криво, написал их админам. Но для других вроде работает: iliazeus.github.io/mastodon-em

@johan

А вот только сейчас нашел примерно то же самое, только с серверной частью :)

emojos.in

Sign in to participate in the conversation
CleverLibre Social

CleverLibre Social is an inclusive social instance for open discussion, learning, and community.
All cultures welcome.
Hate speech and harassment strictly forbidden.