Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Копирование текста в буфер обмена js пример функция

Поддержи проект!!! smile

Копирование текста в буфер обмена js пример функцияСкопировать в буфер обмена в javascript - работающий скрипт для копирования, который и поможет нам скопировать содержание, блока, по которому мы нажмем!.

Собственная,универсальная функция "DwCopy", которая позволяет при некоторых изменениях, копировать вообще из любой части тега!

Подробно о копировании в буфер обмена через javascript

  1. Универсальная функция копирования в буфер обмена
    1. Описание DwCopy функции универсальной.
    2. Функция для копирования в буфер обмена javascript
    3. Скопировать DwCopy
  2. Копируем в буфер обмена функция
    1. Как мы будем копировать в буфер текст в javascript
    2. Функция для копирования текста javascript
Если не хватило - см. несколько вариантов копирования текста в буфер обмена


  1. Универсальная функция копирования в буфер обмена DwCopy.

    08.04.2021

    Рано или поздно, вы скорее всего столкнетесь с тем, что вам потребуется скопировать не только текст, но и значение какого атрибута.

    И вот я тоже столкнулся с такой ситуацией, но нигде, как обычно ничего внятного и универсального нет!

    Конечно!

    Тебе легко, когда ты знаешь, а когда твои знания на нуле - как можно в этом разобраться!

    Я для вас написал собственную, универсальную функцию, которая может копировать в буфер обмена из любой части тега, атрибута, текст и т.д.

    Т.е. для данной функции нет никаких преград и я вам расскажу подробно, построчно, как данная функция копирования в буфер обмена с помощью javascript работает! Запоминаем!!!
    "DwCopy"!

    Работа функции копирования в буфер обмена.

    Хотел просто написать алгоритм работы, но потом скатился до построчного объяснения функции wall:

    С помощью querySelector получаем объект из элемента Dom по его id - который является "переменным", который в свою очередь должен находится в кнопке в атрибуте data(fromid).

    var theget= document.querySelector("#"+name_data .fromid);

    Создаем новый input :

    var newinput = document.createElement("input");

    По переданным данным из второго data(from) по условию, получаем данные, которые передаем в value, ранее созданного "инпута".

    if(name_data.from =="href") { newinput.value = theget. href;}
    if(name_data.from =="innerHTML") { newinput.value = theget. innerHTML;}
    if(name_data.from =="value") { newinput.value = theget. value;}
    if(name_data.from =="placeholder") { newinput.value = theget. placeholder;}

    Физически размещаем созданный "инпут" после body:

    document.body.appendChild(newinput);

    Выделаем данные в value :

    newinput.select();

    Копируем значение value :

    document.execCommand("copy");

    Удаляем созданный "инпут":

    document.body.removeChild(newinput);

    Выводим результат на экран с помощью alert

    alert("Скопированный текст:\n" + newinput.value);




    1. Описание DwCopy функции универсальной.

      Начнем с примеров!

      Одна функция для копирования из любых точек Dom-a! На все случаи жизни!


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

      Здесь текст для копирование текста в буфер обмена
      Как это работает работает.


      Копировать в буфер обмена из атрибута href

      Как это работает работает.

      Копировать в буфер обмена из атрибута value

      Копировать в буфер обмена из атрибута placeholder




    2. Функция для копирования в буфер обмена javascript.


      Копируем текст в буфер обмена из элемента div - описание.

      Пример здесь.

      Необходимые условия для копирования текста в буфер обмена:

      В элементе Dom обязательный атрибут id(в данном примере "example_id").

      В кнопке button, либо любой другой элемент "Dom"-a.

      Внутри кнопки обязательный атрибут data(fromid)(в данном примере "example_id") - ссылка на тот элемент, откуда будем копировать.

      Второй обязательный атрибут data(from)(в данном примере "innerHTML") - указание, из какой части будем копировать(в данном случае "innerHTML" - указывает на текст внутри тега).

      В функции прописываем, что если указано значение "innerHTML":

      if(name_data.from =="innerHTML") { newinput.value = theget. innerHTML;}

      Код html, который копирует текст в буфер обмена:

      <div id="example_id">Здесь текст для копирование текста в буфер обмена</div>
      <button data-fromid="example_id" data-from="innerHTML">Копировать текст в буфер обмена</button>
      Проверить, как это работает.


      Копируем текст в буфер обмена из элемента href- описание.

      Пример здесь.

      Необходимые условия для копирования href в буфер обмена:

      Естественно, что вы понимаете! Что id - это уникальный атрибут, который должен быть на странице один!

      Здесь мы видим, что элемент Dom-a - это ссылка

      Опять внутри id ="example_id1"

      И нас интересует атрибут href, веренее его содержимое...

      В атрибуте data(from) - помещаем откуда будем копировать = "href"

      В функции прописываем, что если указано значение "href":

      if(name_data.from =="href") { newinput.value = theget. href;}

      Код html, который копирует содержимое href в буфер обмена:

      <a href=example id="example_id1">текст_ссылки</a>

      <button data-fromid="example_id1" data-from="href">Копировать в буфер обмена из атрибута href</button>

      Проверить, как это работает.

      Скопировать функцию в сборе с html примерами.

      Копируем здесь.
      Сколько атрибутов уже прописано в функции?

      Всего 4:

      if(name_data.from =="href") { newinput.value = theget. href;}

      if(name_data.from =="innerHTML") { newinput.value = theget. innerHTML;}

      if(name_data.from =="value") { newinput.value = theget. value;}

      if(name_data.from =="placeholder") { newinput.value = theget. placeholder;}

      Как вы наверное поняли:

      Меняется 3 или 4 позиции(если требуется добавить собственный атрибут откуда копировать):

      id="значение" - в элементе, откуда будем копировать.

      data-fromid ="значение"(кнопка)

      data-from = "Откуда"(кнопка... href,innerHTML,value,placeholder)

      И если требуется добавляем собственные атрибуты, во внутрь функции.


  2. Второй пункт не стал удалять - это начальный контент, который был на странице! Не стал его удалять - почему?

    Ну например, вам нужна только одно - скопировать текст и именно по такому алгоритму!

    Копируем в буфер обмена функция №1

    Рассмотрим функцию, которую я использую, для копирования данных в буфер обмена с помощью javascript.




    1. Как мы будем копировать в буфер текст в javascript

      Данная функция будет копировать только содержимое внутри тега. Пытался я её(функцию) приспособить и сделать более универсальной!

      К сожалению только так, но с другой функцией мы попробуем изменить эту ситуацию!

      Для того, чтобы скопировать текст из видимой части, ну например div - а, нам понадобится:

      Сам элемент дерева Domdiv.

      Необходимо, чтобы у элемента присутствовал идентификатор id

      Туда же в элемент помещаем onclick с this

      Функция для копирования в буфер обмена.

      Соберем весь код вместе:

      <div id="explay" onClick="copyText(this)">Здесь первый текст</div>

      Пример работы функции копирования текста javascript

      Для того, чтобы было понятно, как использовать копирование в нескольких тегах на странице, сделаем ппример из двух дивов:

      <div id="explay" onClick="copyText(this)">Здесь первый текст</div>

      <div id="explay1" onClick="copyText(this)">Второй текст</div>

      Пример использования функции для копирования содержимого тега

      Для того, чтобы копирование в буфер обмена произошло - нажмите по любой строке ниже:

      Здесь первый текст
      Второй текст




    2. Функция для копирования текста javascript

      Собрем весь код для копирования в буфер обмена вместе:

      Html:

      <div id="explay" onClick="copyText(this)">Здесь первый текст</div>

      javascript

      <script>

      function copyText(element) {

         var range, selection;


         if (document.body.createTextRange) {

              range = document.body.createTextRange();

              range.moveToElementText(element);

              range.select();

         } else if (window.getSelection) {

              selection = window.getSelection();

              range = document.createRange();

              range.selectNodeContents(element);

              selection.removeAllRanges();

              selection.addRange(range);

         }

         console.log(range);

         try {

              document.execCommand("copy");

              alert("Ссылка скопирована : " + selection );

         }

         catch (err) {

             alert("unable to copy text");

         }

      }

      </script>


Последняя дата редактирования : 23.04.2021 16:44
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Комментариев : 2 COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

16/07/2021 06:41 Slomal Plintus ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
спасибо за ответ, очень помогло!
Ответить
17/07/2021 04:14 Марат Slomal Plintus ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
Рад, что помог! Приходите ещё!
Ответить
Теги:
javascript скопировать в буфер javascript скопировать в буфер обмена javascript скопировать текст скопировать текст в буфер обмена javascript Скопировать текст в javascript

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.
александр анатольевич таширев :
21/07/2021 02:47
прикольно
подробнее.
Марат :
17/07/2021 04:14
Рад, что помог! Приходите ещё!
подробнее.
Slomal Plintus :
16/07/2021 06:41
спасибо за ответ, очень помогло!
подробнее.
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.

текст_ссылки