Копируем текст в буфер обмена на JavaScript
 | |
| В этом руководстве рассмотрим реализацию функции копирования в буфер обмена по клику, где все произойдет в нескольких строк JavaScript. Существуют различные причины по которым вы предпочитаете иметь кнопку для копирования в буфер обмена, а не просто заставлять пользователя выделять и копировать текст вручную. И здесь к счастью для вас есть очень простая функция для копирования контента, что можно реализовать на интернет портале. А точнее мы собираемся сделать все функциональным, где создаем невидимое textarea, в которое мы собираемся скопировать нашу строку при выполнении команды «копировать», чтобы сохранить значение в нашем буфере обмена. Где для начало нужно создать тот контент, который по клику будем копировать, что все задается в ручную, это пропишем те знаки, что далее будут действовать под копирку. HTML Код <div> <p id="punkt-kopirovaniye">Здесь задаем значение виде текста, чтоб по клику можно занести в буфер обмена</p> <button onclick="copyToClipboard()">Скопировать данные</button> <div> Ничего особенного, чтобы увидеть здесь тег p с каким-то фиктивным контентом и button с функцией onclick. То здесь должны поставить метку id на свой тег p, чтобы иметь возможность настроить target на нее с помощью этой функции. Это JavaScript для копирования в буфер обмена Теперь давайте напишем нашу функцию, а затем пройдемся по каждой строке кода: Код function copyToClipboard() { const str = document.getElementById('punkt-kopirovaniye').innerText; const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); } На этом вся установка, но нужно подметить, что оформление здесь нет, что можете уже сами поставить, это сделать красивую кнопку, а также форму под описание, которое изначально видно. Давайте рассмотрим код построчно: Во-первых, мы получаем содержимое целевого элемента, где можете пропустить эту строку, если вы уже передаете строку своей функции. В этом случае контент получен из определенного элемента страницы, поэтому нам нужно получить его по клику. Затем мы приступаем к созданию нового textarea элемента и устанавливаем некоторые свойства для него: 1. Устанавливаем значение в соответствии с содержанием нашей строки. 2. Устанавливаем readonly, под абсолютное положение и оставляем -9999px только для того, чтобы сделать наш пользователь textarea невидимым изначально. Затем мы добавляем элемент, чтобы сразу после этого мы могли обратиться select() к нему. Если вы внедряете функцию копирования в буфер обмена, например в поле комментария в котором возможно уже используется textarea элемент, то можете обратиться select() к нему напрямую, не создавая новый элемент DOM, как мы делаем в этом руководстве. После того как мы закончим, select() и задействуем document.execCommand('copy'), чтобы скопировать выбранный контент. Теперь, если вы попытаетесь нажать «Ctrl + V» или просто щелкните правой кнопкой мыши и выберите «Вставить», то увидите, что содержимое тега p скопировано в буфер обмена. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
