Копиране в буфера чрез

На Bit.ly сайт има подобен бутон, за да копирате кратки URL адреси. Той има съдържание, което е лесно да се копират. Но в такива случаи е много лесен за използване на този бутон.

По-рано добавите този бутон е много трудно, защото всички на забраната за браузъри. Повечето специалисти трябваше да използват библиотеки, като например Flash Clippy. За щастие на нас, ние сега имаме JS библиотека, която улеснява тази задача. И това Clipboard.js. В този урок за начинаещи аз ще ви покажа как да се използват ефективно този инструмент.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

За да инсталирате Clipboard.js, трябва да изтеглите файла на съответната папка на сайта и да предоставя линк към него в документа. Или пък може да даде линк към CDN, добавете линка по-долу в HTML кода на страницата:

Ние трябва да създадем два елемента. Една цел за съхраняване на копиран съдържание. Целевата елемент може да бъде, например, въвеждане (с ID), съдържащ кратко URL:

Вторият елемент е тригер. В нашия случай - на бутона. Спусъкът посочва данни за атрибутите на данни клипборда-мишена. Стойността е дадена от желания елемент ID:

След добавянето на тези два елемента в оформление на страница може да включва Clipboard.js. За да направите това, добавете следния код между маркерите скрипт, или да се свържете кода в отделен файл.

Готово! С кликване върху бутона сега сме в състояние да копирате кратък URL адрес.

разширяване на възможностите

В някои ситуации просто не може да бъде добавена към целевата елемент ID, клас или data- * атрибут - когато се работи със стария съдържанието или с няколко целеви елементи може да се случи нищо.

Като пример, имаме уеб сайт. съдържанието на сайта се състои от части от текста и кодови фрагменти. За синтаксиса ние ще използваме отличните библиотечни PrismJS. Но PrismJS няма бутон "копие", и ние искаме да го добавите чрез използване Clipboard.js. Но проблемът е, че имаме стотици страници с подобно съдържание онлайн. Тук ние ще ви помогне Clipboard.js API.

Обърнете внимание на приложния програмен интерфейс

В Clipboard.js има две неща: успехи и грешки. Събития проверяват успеха или провала на съдържанието е копиран. В Safari, най-вероятно, той ще продължи да работи събитие за грешка, тъй като браузърът не поддържа Изрязване / на метода на ExecCommand, който разчита на Clipboard.js. Събитията се връща от следните свойства:

текст: просто се върна успех събитие. Имотът на текст се съхранява, копират или отрязани от елемента цел.

спусък: връща спусъка, което копия или нарязани на текст.

Този интерфейс ви позволява да вградите Clipboard.js в нашия сайт, без да се променя оформлението, че не е необходимо да се променят елементи от опаковката. В нашия случай, ние можем да ги използваме, за да добавите бутона "копие", за да код.

Clipboard.js + PrismJS

На този етап ние трябва вече да са инсталирани PrismJS (изтеглете файла в папка на сайта и дават възможност за свързване към него). Всяка част от кода в нашата маркиране се поставя в предварително тагове и код от клас езиково. В нашия пример, ние използваме по-малко код, т.е. трябва да добавите клас език-малко:

Копирайте бутона за добавяне

Сега, за да копирате съответната част от кода трябва да се добави към всеки бутон етикет предварително. Да започнем с това, ние откриваме всички маркери, предварително се използва метод getElementsByTagName.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

В момента има две или повече предварително тагове. Необходимо е да се преведе през всеки елемент във веригата.

За да добавите бутон, добавете следния код в течение за.

Сега, този бутон трябва да се показва във всеки част от кода:

тичам клипборда

Нашата бутон вече е напълно оперативна. Като кликнете върху него, кодът трябва да бъде копиран. Да отидем малко по-далеч и да работи със събитията по поръчка.

Ние работим със събитията по поръчка

Да кажем, че искаме да се добави малко интерактивност в процеса на копиране на съдържанието. След успешното копиране на текст, ние искаме да се промени текста на бутона, за да "Copy" на "избран". За да направите това, добавете следния код:

Горният код изпълнява 3 стъпки:

На първо място, ние пречисти пробата с помощта на функцията за клипборда clearSelection (). Не е задължително.

След промените настройката на "избрани"

След 2 секунди върне стойност е "Copy".

За грешка събитие в браузъри, които не поддържат метода на ExecCommand, като Safari (като на това писание), ние ще се промени текста на "Прес" CTRL + C "». Добавете кода по-долу:

Това е! Сега имаме напълно работеща и интерактивен бутон копиране на текст. Ние просто трябва да го оформите. Справи с тази си задача.

заключение

Clipboard.js библиотека - един много полезен инструмент, който позволява почти безкръвен добавка към уеб страница, натиснете бутона "Копиране". В този урок, ние с основните положения и леко се е подобрила нашия ключ с API и потребителски събития.

В Clipboard.js използва методи за подбор и ExecCommand, т.е. Нашият метод ще работи само в браузъри, които поддържат тези два метода: Chrome 42, Firefox 41, Internet Explorer 9, а Opera 9. Както бе споменато по-горе, потребителите на Safari досега без успех. Надявам се ползва този урок и да не забравяме за демонстрацията.

Редакция: Екип webformyself.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

Най-IT новини и уеб разработки на нашия канал Телеграма