Изготовление сайтов в Мариуполе, ДНР. Вырезать, копировать и вставлять в JavaScript с помощью API буфера обмена

 
 

Доступ к буферу обмена ОС с помощью JavaScript браузера был возможен в течение нескольких лет с использованием document.execCommand ().

К сожалению, есть некоторые проблемы:

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

поддержка неоднородна, особенно в старых версиях Safari на macOS и iOS.

доступ к разрешениям различается в разных браузерах, и

API никогда нельзя было считать элегантным

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

Зачем приложению доступ к буферу обмена?

Как разработчик, вы знаете, как работает буфер обмена, и регулярно используете следующие сочетания клавиш:

Ctrl| Cmd+ Cкопировать

Ctrl| Cmd+ Xрезать

Ctrl| Cmd+ Vвставить

Те, у кого меньше опыта работы с компьютером, не обязательно будут иметь такие знания. Они также могут использовать устройства с сенсорным экраном, на которых недоступны сочетания клавиш. Предложение простых в использовании значков вырезания и вставки может быть полезным.

Кроме того, вы можете захотеть изменить содержимое после завершения действия с буфером обмена, например, добавить или удалить форматирование.

Доступ к буферу обмена опасен!

Программный доступ к буферу обмена вызывает несколько проблем с безопасностью:

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

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

Во избежание потенциальных проблем API буфера обмена можно использовать только на страницах, обслуживаемых через HTTPS (localhostэто также разрешено). При работе в iframe родительская страница также должна предоставлять clipboard-readи/или clipboard-writeразрешения:

<iframe

src="childpage.html"

allow="clipboard-read; clipboard-write"

>

API доступен только для активной вкладки браузера (не для фоновых вкладок) и может быть активирован только взаимодействием с пользователем, например щелчком мыши. При необходимости у пользователя будет запрошено разрешение на чтение данных из буфера обмена:

Разрешение пользователя API буфера обмена

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

Обнаружение функций API буфера обмена

API буфера обмена доступен, когда navigator.clipboardвозвращает правдивый результат. Например:

if (navigator.clipboard) {

console.log (‘Clipboard API available’) ;

}

Однако это не гарантирует, что браузер поддерживает все функции, поэтому необходимо выполнить дополнительные проверки. Например, на момент написания статьи Chrome поддерживал метод readText () API, а Firefox — нет.

Скопируйте и вставьте текст

Копирование и вставка текста будут полезны в большинстве приложений. API освежающе прост:

// copy text TO the clipboard

await navigator.clipboard.writeText (‘This text is now in the clipboard’) ;

// get text FROM the clipboard

let text = await navigator.clipboard.readText () ;

Вам потребуется значительно больше кода для обнаружения поддержки и обработки ошибок...

Посмотреть текстовую демонстрацию API буфера обмена

Код можно скачать с GitHub. Обратитесь к clipboardtext.js для JavaScript.

В этом примере реализовано копирование текста, когда data-copyатрибут добавляется к любому HTML-элементу, например к кнопке. Вы можете установить это значение на одно из следующих:

жестко запрограммированная строка, например data-copy="copy this to the clipboard".

селектор CSS, например data-copy="#mysection". Затем копируется текстовое содержимое первого совпадающего элемента.

При желании вы можете установить собственное сообщение об успехе в data-doneатрибуте:

 

 

Кнопка отображается только тогда, когда navigator.clipboard.writeText () поддерживается. При щелчке обработчик событий JavaScript находит текст, копирует его в буфер обмена и показывает анимированное сообщение об успешном завершении.

Кнопка вставки текста очень похожа, за исключением того, что она определяет data-pasteатрибут, который должен указывать на узел DOM:

Скопируйте и вставьте данные

API буфера обмена readText () и writeText () являются удобными вариантами для более общих read () и write () методов. Они имеют меньшую поддержку браузера, но могут копировать и вставлять данные любого типа, например бинарные изображения.

Для копирования требуются данные большого двоичного объекта, которые обычно возвращаются методом fetch () or canvas.toBlob (). Это передается ClipboardItemконструктору, чтобы его можно было записать в буфер обмена:

const

image = await fetch (‘myimage.png’),

blob = await image.blob () ;

await navigator.clipboard.write ([

new ClipboardItem ({ [blob.type]: blob })

]) ;

Вставка является более сложной, поскольку несколько ClipboardItemобъектов могут быть возвращены с разными типами содержимого. Поэтому необходимо перебирать каждый тип, пока не будет найден полезный формат. Например:

const clipboardItems = await navigator.clipboard.read () ;

for (const clipboardItem of clipboardItems) {

for (const type of clipboardItem.types) {

if (type === ‘image/png’) {

// return PNG blob

return await clipboardItem.getType (type) ;

}

}

}

Просмотрите демонстрацию изображений API буфера обмена (поддерживается в браузерах на основе Chromium).

Код можно скачать с GitHub. Обратитесь к clipboardblob.js для JavaScript.

Это работает аналогично текстовой демонстрации, в которой кнопки копирования и вставки должны указывать на элементы DOM с помощью селектора CSS data-copyblobиdata-pasteblobатрибутов. Например:

 

 

 

 

 

 

 

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

Вырезать, копировать и вставлять события

События cut, copyи pasteзапускаются всякий раз, когда пользователь инициирует действие буфера обмена в браузере — обычно с помощью контекстного меню или сочетания клавиш, упомянутых выше. Это поддерживается в большинстве браузеров, и функции-обработчики могут перехватывать события для внесения изменений, используя clipboardDataобъект, переданный в качестве параметра.

Следующая функция переводит весь вырезанный или скопированный текст в верхний регистр. Обратите внимание, что это e.preventDefault () останавливает действие вырезания/копирования по умолчанию, которое переопределяет его:

body.addEventListener (‘cut’, cutCopyHandler) ;

body.addEventListener (‘copy’, cutCopyHandler) ;

// cut or copy event handler

function cutCopyHandler (e) {

const selection = document.getSelection () ;

// send uppercase text to clipboard

e.clipboardData.setData (

‘text/plain’,

selection.toString ().toUpperCase ()

) ;

if (e.type === ‘cut’) selection.deleteFromDocument () ;

// stop default cut/copy

e.preventDefault () ;

}

Следующий код прикрепляет обработчик вставки к определенному

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая