Сверните свою собственную копию в буфер обмена в 20 строках JavaScript

Использование буфера обмена ОС — базовый навык ИТ. Как разработчик, вы узнали, что вкладка, Ctrl / Cmd + A, Ctrl / Cmd + C, а затем Ctrl / Cmd + V, выделит, скопирует и вставит в одно мгновение.

Жизнь не так проста для обычных пользователей. Даже если пользователь знает, что такое буфер обмена, те, у кого видение 20:20 и кошачьи рефлексы, могут изо всех сил пытаться выделить именно тот текст, который им нужен. Процесс копирования редко бывает интуитивно понятным, если они не знают сочетаний клавиш, не видят скрытое меню « Правка» браузера, никогда не использовали меню, вызываемое правой кнопкой мыши, или не знают о параметрах длительного удержания на сенсорных экранах.

Возможно, мы могли бы помочь всем, предлагая кнопки «копировать в буфер» одним щелчком мыши? Это было бы полезно даже для самого быстрого опытного пользователя с клавиатурой!

Безопасность буфера обмена

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

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

Сегодня возможна базовая интеграция с буфером обмена, но есть ограничения:

1. Большинство браузеров поддерживают буфер обмена, но забывают Safari на Mac и iOS.
2. Поддержка варьируется в зависимости от браузера, а некоторые функции являются неполными или содержат ошибки.
3. Пользователь должен инициировать событие, такое как нажатие кнопки мыши или нажатие клавиатуры. Скрипт не может произвольно использовать буфер обмена в любое время.

document.execCommand ()

Ключевым методом является document.execCommand() который может быть передан 'cut' , 'copy' или 'paste' . Мы сосредоточимся на document.execCommand('copy') так как это наиболее полезный вариант.

Прежде чем использовать его, мы должны проверить, поддерживает ли браузер копирование команды, используя document.queryCommandSupported('copy'); или document.queryCommandEnabled('copy'); (да, это два метода, которые делают то же самое) . К сожалению, оба возвращают false в Chrome, хотя это поддерживается. Мы могли бы проверить доступность document.execCommand но наиболее приемлемый вариант — обернуть document.execCommand('copy') в блок try-catch .

Далее, что мы должны позволить пользователю копировать? Наш скрипт должен выделять текст, и все браузеры разрешают select() текстового input и полей textarea с помощью метода select() . Firefox и Chrome / Opera также поддерживают document.createRange который позволяет выбирать текст из любого элемента, например

 // select text in #myelement node var myelement = document.getElementById('#myelement'), range = document.createRange(); range.selectNode(myelement); window.getSelection().addRange(range); 

Однако это не поддерживается в IE / Edge.

clipboard.js

Если вы потеряли всякую надежду на реализацию надежного кросс-браузерного решения для буфера обмена, clipboard.js может облегчить задачу. Он имеет несколько параметров, таких как атрибуты данных HTML5, которые идентифицируют триггер активации и какой элемент будет скопирован, например

 <input id="copyme" value="text in this field will be copied" /> <button data-clipboard-target="#copyme">copy</button> 

Ролл свой собственный

clipboard.js — это всего лишь 2 КБ, но мы можем реализовать решение менее чем в двадцати строках кода, если мы рады принять следующие критерии:

• могут быть скопированы только соответствующие поля формы
• в некоторых браузерах произойдет сбой (я смотрю на вас Safari), но мы можем выделить введенный текст и показать сообщение, советующее пользователю нажать Ctrl / Cmd + C.

Как и clipboard.js, мы создадим кнопку активации активации, которая имеет атрибут data-copytarget ( data-copytarget ), указывающий на элемент для копирования ( #website ):

 <input type="text" id="website" value="http://www.sitepoint.com/" /> <button data-copytarget="#website">copy</button> 

data-copytarget функция может прикрепить обработчик события click который анализирует любые атрибуты data-copytarget , выбирает текст поля и запускает document.execCommand('copy') . Если это не удается, текст остается выделенным, и отображается окно с предупреждением:

 (function() { 'use strict'; // click events document.body.addEventListener('click', copy, true); // event handler function copy(e) { // find target element var t = e.target, c = t.dataset.copytarget, inp = (c ? document.querySelector(c) : null); // is element selectable? if (inp && inp.select) { // select text inp.select(); try { // copy text document.execCommand('copy'); inp.blur(); } catch (err) { alert('please press Ctrl/Cmd+C to copy'); } } } })(); 

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