ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Копирование и вставка данных из буфера обмена
Копирование и вставка данных из буфера обмена
 | |
| В статье рассмотрим функцию JS для того, чтоб скопировать данные под содержимое при одном нажатие клика, которое находятся в блоке буфера обмена. А точнее, в материале представлен простой скрипт, что выполняет копирование текста в блоке. Где в работе задействует один клик нажатие на данные, которые нужно скопировать и перенести на другое место. Ведь данную функцию можно применить на многих сайтах, где сам скрипт безусловно полезен, чтоб занести содержимое в буфер, где только нам придется навести клик на то описание или данные виде кода с последствием нажатие левой кнопки. Как пример, мне в основном такая функция попадается на разных интернет магазинов, где предлагают разные коды на скидки, и вам не нужно все копировать, как делалось ранее, а только сделать клик, что очень удобно и времени мало занимает. Этот скрипт можно задействовать на основных страницах сайта, где пользователь видит название, где предлагают данные, и вы их видите, и уже знаете, что будет занесено в буфер обмена, чтоб перенести, что скопировали в другое место. Сам пример можно посмотреть в работе на странице демонстрации, где все очень доступно и понятно, но, а мы переходим к установочному процессу. По умолчанию так представлено:  1. Одна из важных функции считаем - jQuery библиотеку, что на прямую задействована на корректность работы. Перед добавлением нужно убедиться, что на сайте не подключена библиотека jQuery. Хотя из множества примеров, основном этот скрипт присутствует, ведь он не только под копирование прописывается на сайтах. Код <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> HTML Появление оповещений:  2. Здесь нужно устанавливать по месту, где вы хотели видеть этот функционал. Не забываем, что по умолчанию "Занесено в буфер обмена" скрыто. Но при нажатие с низу появится зеленая кнопка с данным названием, что подтверждает копирование в буфер обмена, с последствием автоматического скрытия. Код <div class="tekstova_kopia_sylku">Здесь текст, который мы скопируем по клику</div> <div class="kopen_pugak_sylkam">Занесено в буфер обмена</div> CSS 3. В стилистике представлены блоки, где первый идет на тот текст, что находится внутри, где происходит копирование, а второй блок задействован на оповещение, что подтверждает появлением зеленым окном, которое идет под описание, что все выполнено корректно. Код .kopen_pugak_sylkam{ line-height: 42px; border-radius: 3px; background: #0da02d; color: #f9f6f6; position: fixed; padding: 0 15px; z-index: 99; bottom: 30px; left: 50%; margin-left: -118px; display: none; box-shadow: rgb(27 27 27 / 15%) 0px 0px 18px; } .tekstova_kopia_sylku { cursor: pointer; display: inline-block; padding: 0 8px; line-height: 32px; background: #2c6daf; color: #f1ebeb; } JS 4. Аналогично производим установку по месту, где изначально выставили HTML и библиотека, где стараемся все расположить в одном месте, где вы хотите изначально видеть эту функцию. Это может быть страница, а также не исключаю, что кто-то поставит под модальные окна. Код <script> jQuery(document).ready(function($){ $('.tekstova_kopia_sylku').click(function() { var $text_copy = $(this); var $temp = $("<input>"); $("body").append($temp); $temp.val($text_copy.text()).select(); document.execCommand("copy"); $temp.remove(); $('.kopen_pugak_sylkam').fadeIn(400); setTimeout(function(){$('.kopen_pugak_sylkam').fadeOut(400);},5000); }); }); </script> На этом вся установка, где не очень сложно, главное прочтите установочный процесс, где все подробно описано. Но и не забываем про DEMO страницу, где изначально можете посмотреть скрипт в работе. Теперь на сайте появляется возможность вывести данные, что по клику пикируем, это как описание или те знаки, которые в дальнейшем пригодится в использование на сайте. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |