ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Выделение и копирование в буфер по клику

Выделение и копирование в буфер по клику

Эта функция позволяет пользователю скопировать нужный ему текст в буфер обмена, где всего применяет один клик, которая задействуем JavaScript. Иногда случается что нужно скопировать текст, где просто устанавливаем кнопку, и при нажатии на ее пользователь копирует полный текст в буфер обмена, где переносит на заданное место. Это можно видеть на разных функциях, больше всего, когда идет под ту информацию, где представляют этот функционал, чтоб в ручном режиме не было ошибок в плане пропущенных знаков.

Безусловно кто-то уже встречал похожие кнопки копирования в буфер обмена на тематических сайтах. Это может быть разное описание, включая цитаты, где на сайтах есть специальная кнопка, что позволяет легко копировать цитаты одним щелчком мыши. Теперь мы можем задействовать эту функциональность, которая используется на JavaScript. И здесь нужно подчеркнуть, что возможно этот скрипт на старых браузерах будет работать не корректно.

Само копирование происходит не так сложно, один клик и вы занести большую базу в буфер обмена, а если говорить про этот материал. То здесь основном идет под текстовое поле, где находятся знаки или строка текста, а ниже находится кнопка для копирования. Что как видим не чего сложного нет, если изначально разобраться, где для этого будет видео ознакомление, а также demo страница, где изначально можно оценить работоспособность.

Также немного выстроил по дизайну кнопку, где так получилось:

Копировать текст в буфер обмена пользователя

Установочный процесс:

HTML

Код

<textarea id="kopirovaniya-teksta" spellcheck="false">Вот некоторые демонстрационные тексты для тестирования программы копирования в буфер обмена. Нажмите кнопку ниже, чтобы скопировать эти тексты.!!!167578</textarea>

<button id="copy" type="button">Скопировать в буфер обмена<span class="karesursa" aria-hidden="true">Скопированный</span></button>

<textarea id="pustoye-pole" placeholder="Вставьте скопированные тексты сюда для тестирования ...."></textarea>

CSS

Код

.karesursa {
  position: absolute;
  left: 0; top: 0; right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-1em);
  color: #171616;
  transition: all .500s;
}
.copied .karesursa {
  opacity: 1;
  transform: translateY(-2em);
}
h1 {
  margin: 1.75em auto 1.25em;
}
textarea,
button {
  font-size: 1em;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
textarea {
  display: block;
  width: 580px;
  max-width: 100%;
  height: 75px;
  margin: 2em auto 1.5em;
  background: #eaeaea;
  border: 1px solid #c5b8b8;
  padding: 12px 14px;
  resize: vertical;
}
[id="pustoye-pole"] {
  margin-top: 3em;
}
textarea:focus {
  border-color: red;
}
button {
  position: relative;
  padding: 10px 18px;
  border: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  font-weight: bold;
  color: #fff9f9;
  background: #1f81a9;
  transition: background .275s;
  cursor: pointer;
  border-radius: 50px;
  border: 2px solid #f7f2f2;
  box-shadow: 2px 2px 15px 1px rgba(62, 57, 57, 0.38), 0px 5px 11px 2px rgba(37, 35, 35, 0.1);
}
button:hover,
button:focus {
  background: #2d2c2c;
}

Код

Эта эта очень простая, объяснять нечего, вы легко поймете после получения кодов, где только необходимо создать 3 файла, это под HTML, второй для CSS и третий для JavaScript.

Далее устанавливаем по месту, где нужно скопировать быстро и качественно, что по своему функционалу, этот скрипт можно задействовать на многих элементах.

Демонстрация

Видео обзор:

PS - ранее на сайте уже размещать материал под названием копирование текста в буфер обмена, что можете оценить второй вариант, который работает немного по другому, там просто идет функционал, где нет дизайна, что основном можно видеть на сайтах.

24 Августа 2019 Загрузок: 1 Просмотров: 3545 Комментариев: (6)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 6
Порядок вывода комментариев: Kosten 24 Августа 2019 00:28¹ 0 Подскажите плиз, сам скрипт полностью рабочий, но посмотреть демонстрацию, то ниже кнопки идет еще одно окно, вот это. Код <textarea id="pustoye-pole" placeholder="Вставьте скопированные тексты сюда для тестирования ...."></textarea> По сути оно нужно для проверки и не более, так как функция идет под копирование и переносе данных, но явно не в это окно, но разве, как сказал при проверки материала. Но стоит его убрать, так скрипт полностью не рабочий. И здесь все заточено на id="pustoye-pole", где хотел его закрепить к основе, но там явно лишний. Как сделать, чтоб осталось одно окно, а вот проверочное убрать, сейчас в материале идет с проверочным. -SAM- 24 Августа 2019 03:37² 0 Правильно ли я понял, что взято с webdevtrick ? Подано некорректно ~~вами~~ в том плане, что здесь идёт копирование без выделения, просто копирует всё содержимое из поля по клику на кнопку, с последующим уведомлением (на демо всё видно). //UPD.: вернее даже я не так понял, всё нормально... читаю сначала - "функция позволяет пользователю скопировать нужный ему текст в буфер обмена", а далее - "нужно скопировать текст, где просто устанавливаем кнопку, и при нажатии на ее пользователь копирует полный текст в буфер обмена"... то есть выделение есть, но оно на автомате идёт всего поля, что нужную часть из него нельзя выделить и скопировать нажатием на кнопку после. Если вы поле убираете - там просто для примера идёт оно (и код написан, чтобы это поле там было - с учётом того, что после клика его подсветит и в него вставят, типо "переносит на заданное место"). Основная суть материала - расписано про js-функцию document.execCommand( 'copy' ), что далее идёт пример кода как её можно применять для копирования из поля с определенным id, нажимая на кнопку... вот и всё. Как раз "этот скрипт можно задействовать на многих элементах", а что в материале идёт - оно лишь для примера. P.S.: это для тех, кто писать код будет под себя, другим голову ломать не стоит. Kosten 24 Августа 2019 04:03³ 0 Все правильно с этого сайта, да идет копирование в буфер обмена, что не нужно выделять, то только стоит убрать демку под демонстрацию, в буфер обмена не копирует, а начинает выделять. Вероятно нужно в js убрать, то что связывает со вторым окном, но пробовал, не получилось, а так с двумя окнами этот скрип не актуален. -SAM- 24 Августа 2019 04:29⁴ 0 Ну, так я не зря написал - для тех, кто писать код под себя будет. Откуда вы брали, то там ссылка есть на полный расклад о функции, вот читать нужно. Что конкретно примера касается - там скрипт написан с цепочкой событий. Поле убирается пустое - перестаёт работать, что обрывается работа скрипта, поскольку нет потом элемента на странице, на который нужно по условию поставить фокус. Я вот убрал то поле из HTML и код JS такой потом следует сделать, проверяйте: Код var toCopy = document.getElementById( 'kopirovaniya-teksta' ), btnCopy = document.getElementById( 'copy' ); btnCopy.addEventListener( 'click', function(){ toCopy.select(); if ( document.execCommand( 'copy' ) ) { btnCopy.classList.add( 'copied' ); toCopy.focus(); var temp = setInterval( function(){ btnCopy.classList.remove( 'copied' ); clearInterval(temp); }, 600 ); } else { console.info( 'document.execCommand went wrong…' ) } return false; } ); Также можно убрать toCopy.focus(); вовсе из этого кода скрипта... или сделать toCopy.blur(); - чтобы фокус отвести от выделяемого скриптом содержимого в поле, откуда копируется ... btnCopy.focus(); - чтобы на кнопке оставить фокус. Kosten 24 Августа 2019 14:19⁵ 0 Как заметку сделаю, что нужно к стилям добавить, для того, чтоб кнопка по центру была. Код button { height: 50px; display:block; position: relative; border: 1px solid white; margin:0 auto; } -SAM- 25 Августа 2019 07:27⁶ 0 За центровку там отвечает лишь связка display:block; и margin:0 auto; ... в демо идёт изначально по центру, поскольку отцентровано в body {text-align:center;} ... пишу для тех, кто не в курсе (в любом случае, материалов про центровку элементов достаточно на сайте).