#NeuralNetwork #Mastodon #javascript #lifehack
Напиши javascript-код, который по щелку на любой картинке на странице будет копировать в буфер ее html-атрибут title
**#Sage:**
Для реализации данной функциональности можно использовать событие "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);
```
выцепляем из кода веб-морды #Mastodon фрагмент с перечислением «серверных» #emoji, увеличиваем размеры и — в закладки. А, забыл, там еще в коде надо img на span поменять, потому что в html не img используется.
А это всё зачем? А затем, что в маленьком окошке не видно нихрена.
@tennoseremel Uncaught TypeError: document.querySelector(...) is not iterable
@johan Там камент отредактирован же, ну :)
@tennoseremel Непонел я 😠
@johan .querySelectorAll(), а не .querySelector(). Руки не дожали… :)
@tennoseremel Благодарю, работает отлично!
@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 История покажет :)
@johan осталось добавить текстовое поле для url инстанса, и обращение к его api вместо хардкода списка эмодзи - и можно хостить как сервис :)
@iliazeus И, насколько я понимаю, это же можно вообще без серверной логики сделать?
@johan должно быть так, да
https://iliazeus.github.io/mastodon-emoji-picker/
Конкретно с qoto.org сейчас может не работать - их сервер настроен немного криво, написал их админам. Но для других вроде работает: https://iliazeus.github.io/mastodon-emoji-picker/#mastodon.ml
А вот только сейчас нашел примерно то же самое, только с серверной частью :)
@johan В 21 веке это выглядит как-то так:
```javascript
for (let image of document.querySelector('img')) {
image.addEventListener(...);
...
}
```