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

Публікації

Для виконання копіювання даних з буферу використаємо метод document.execCommand().

Даний метод не дає 100% гарантії кросбраузерної роботи з браузером, адже не всі браузери дозволяють команди: 'copy', 'paste', 'cut', але на мою думку найкращий варіант. Метод document.execCommand() підтримують більшість браузерів включаючи мобільних на відміну від Flash, та й Flash "помирає" з появою HTML5.

Деякі браузери або блокують команду 'copy' або лише виконують на подію користувача onclick тощо.

Для копіювання, вирізання тексту за допомогою document.execCommand() необхідно текст щоб текст був виділений.

Копіюємо текст елементу

Для копіювання тексту з необхідного елементу його спочатку потрібно виділити, а потім виконати команду "copy":

#test Копіювання тексту Javascript
function copyTextElement(id){ //створюємо об'єкт Selection var selection = window.getSelection(); //виділяємо текст елементу selection.selectAllChildren(document.querySelector(id)); document.execCommand('copy'); selection.removeAllRanges(); } copyTextElement('#test');

Функція яка копіює вказаний текст в буфер обміну:

function copyText(text){ var el=document.createElement('input'); try{ el.value=text; document.body.appendChild(el); el.select(); document.execCommand('copy'); }finally{ el.parentElement.removeChild(el); } } copyText('http://яваскрипт.укр/');

Вдосконалимо функції запам'ятавши активний елемент і передаємо йому фокус після копіювання тексту.

function copyText(text){ var el=document.createElement('input'), actEl=document.activeElement; try{ el.value=text; document.body.appendChild(el); el.select(); document.execCommand('copy'); }finally{ document.body.removeChild(el); actEl.focus(); } } copyText('http://яваскрипт.укр/');
Адмін 2017-10-14 21:15:33

Тільки зареєстровані користувачі можуть писати коментарі.