Сегодня рассмотрим задачу - скопировать текст в буфер обмена средствами js (JavaScript).Это может быть полезно, когда создается карточка организации с реквизитами или другими данными, которые нужно иметь возможность перенести.
Техническое задание:
- копировать текст по клику
- множественное использование на одной странице
Рассмотрим код, который дает возможность скопировать текст и другой контент (приведен ниже). Обратите внимание на вкладку разметки и js скриптов.
See the Pen
Untitled by Alex (@alex_voit)
on CodePen.
Скопировать текст в буфер обмена js скрипт - пояснение
- 1 и 18 строки – это обертка скрипта, которая препятствует выполнению скрипта до загрузки библиотеки.
- 3 строка означает, что скрип сработает только при клике на объектах с классом copy-btn. Эта настройка позволит использовать скрипт на нескольких объектах одной страницы.
- 10 строка добавляет класс родительского элемента, для вывода подсказки о том, что текст скопирован.
- 12-14 строки нужны для того чтобы задать таймер – время которое будет отображаться подсказка.