Копіювання в буфер обміну за допомогою JavaScript.

Дивно, як сучасні браузери еволюціонували, і наскільки потужними вони стали ми потрапили в точку, де нам не потрібно більше спалаху.
Час назад єдиний спосіб скопіювати в буфер обміну браузера був за допомогою кнопки в додатку з використанням Flash, але з сучасними браузерами, ми можемо досягти копіювання в буфер обміну, використовуючи JavaScript, без використання будь-яких плагінів. По-перше, давайте встановимо як скопіювати в буфер обміну, використовуючи JavaScript

Буфер обміну, в основному це місце для зберігання та вилучення одного шматка клонованих даних. Там може бути більш ніж один буфер присутній, наприклад, «оперативна система Буфер обмін», це було б менш важким, якщо всі програми були в стані / створено для використання в оперативному буфері обміну, але, на жаль, це не завжди так. Наприклад, віртуальні машини, якщо ви явно не включити опцію інтеграції буфера обміну.
Веб-додатки працює в ізольованому середовищі, вона обмежують доступ до файлової системи і системний буфер обміну, з міркувань безпеки. У цій статті ми побачем, чому система Буфер обміну є обмеженим ресурсом.
На щастя, є способи обійти ці обмеження і отримати доступ до системи з використанням буфера обміну JavaScript. Цей пост про декілька способів зробити це.

Копіювати в буфер обміну, використовуючи JavaScript

<inputname=”exampleClipboard”placeholder=”Вставте текст, який ви хочете скопіювати”value=”Example text”tabindex=”1″autocomplete=”off”maxlength=”240″style=”width:200px”type=”text”>
<p>
<buttonid=”copy”>
Скопіювати текст
</button>
</p>
<p>
Клацніть правою кнопкою миші паста або Ctr + v після кнопки натисніть Скопіювати <br/>
<textarea></textarea>
</p>

Функція для виклику:

<script>
functioncopyToClipboard() {
document.querySelector(‘input’).select();
document.execCommand(‘copy’);}
</script>

Кнопка

<buttonid=”howToCopyClipboard”onclick=”copyToClipboard()”>Копіювати</button

Приклад 2 (Ваніль в JavaScript):Це більш розгорнуте рішення, в якому ми будемо перевіряти сумісність з браузерами. Для цього рішення дозволяє створити функцію, яка копіює рядок в буфер обміну, ця функція повинна бути викликана з обробника подій.

functioncopyToClipboard(text) {
if(window.clipboardData && window.clipboardData.setData) {
// IE конкретний шлях коди, текстове поле показується в той час як діалог видно.
returnclipboardData.setData(“Text”, text);
}
elseif(document.queryCommandSupported && document.queryCommandSupported(“copy”)) {
vartextarea = document.createElement(“textarea”);
textarea.textContent = text;
textarea.style.position = “fixed”; // Запобігання прокрутки вниз сторінки в MS Edge.
document.body.appendChild(textarea);
textarea.select();
try{
returndocument.execCommand(“copy”); //Виняток безпеки можуть бути викинуті деяких браузерів.
} catch(ex) {
console.warn(“Копіювати в буфер не вдалося.”, ex);
returnfalse;
} finally {
document.body.removeChild(textarea);
}
}
}

Приклад 3 (з бібліотекою): Буфер обміну JavaScript.
Було б неправельно написати код валідації для сумісності з браузером, ми будемо використовувати бібліотеку, яка управляє всім за вас. Буфер обміну Js дуже проста у використанні, ось приклад:

<!– мета –>
<inputid=”textToCopy”value=”якись текст який хочете скопіювати”>

<!– Спусковий гачок–>
<buttonclass=”btn”data-clipboard-target=”#textToCopy”>Копіювати в буфер обміну
</button>

Зверніть увагу на те, що

data-clipboard-target

зробити роботу тут. Давайте подивимося ще одну особливість, але на цей раз, щоб вирізати замість копії.
Єдина зміна, яку необхідно додати це :

data-clipboard-action=”cut”>

як це:

<textarea id=”textToCopy”>Ще одна особливість … </textarea>

<buttonclass=”btn”data-clipboard-action=”cut”data-clipboard-target=”#textToCopy”>
Вирізати в буфер обміну
</button>

Сподіваюсь ця стаття була корисною.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Залишити коментар