ClipboardEvent — події копіювання й вставки в JavaScript

Загальний опис

ClipboardEvent — це події, які виникають під час роботи з буфером обміну в JavaScript, включаючи копіювання, вирізання та вставку тексту або інших даних. Ці події надають можливість програмно контролювати вміст буфера обміну або додавати в нього нові дані під час взаємодії користувача з елементами на сторінці. Події copy, cut, та paste пов'язані з ClipboardEvent і дозволяють обробляти дані в реальному часі, перехоплюючи команди перед їх виконанням.

Для роботи з "ClipboardEvent" можна використовувати методи addEventListener() для прив’язки функцій обробки до потрібного елемента. Наприклад, обробка події копіювання (copy) дозволяє змінювати дані, що копіюються у буфер обміну:

element.addEventListener('copy', (event) => {
  event.clipboardData.setData('text/plain', 'Текст замінений при копіюванні');
  event.preventDefault(); // Запобігає копіюванню стандартного тексту
});

Подібно, подія cut працює при вирізанні, і її обробка може, наприклад, додавати певні дані до вирізаного тексту. Метод event.clipboardData.setData() дозволяє контролювати, що саме буде збережено до буфера, а event.preventDefault() запобігає виконанню стандартної дії.

Подія paste обробляє вставку даних з буфера обміну і дозволяє перевірити вміст перед вставкою:

element.addEventListener('paste', (event) => {
  const pastedData = event.clipboardData.getData('text/plain');
  console.log('Вставлено:', pastedData);
});

Ця подія зчитує дані, які користувач намагається вставити, використовуючи метод getData(). Clipboard API надає велику гнучкість для інтеграції копіювання та вставки в різних випадках використання, як-от автоматичне форматування або фільтрація тексту перед вставкою. Це дозволяє зберігати дані або логувати дії користувача, не порушуючи основної функціональності.

правити

Порада

Ви можете логувати всі операції з буфером обміну, що важливо для додатків з високою безпекою. Відстежуйте події cut та paste, щоб перевіряти і логувати кожну операцію для підвищення безпеки.

автор: Bond правити

Порада

event.clipboardData.getData() дозволяє перевірити типи вставлених даних. Використовуйте це, щоб обмежити вставку тільки тексту, наприклад event.clipboardData.getData('text/plain').

автор: Bond правити

Порада

Зберігайте вміст буфера перед модифікацією, щоб мати можливість повертати вихідний текст, якщо необхідно. Це можна реалізувати шляхом збереження початкових даних до зміни в copy або cut.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('copy', function(event) { /* Код для обробки копіювання */ });
element.addEventListener('cut', function(event) { /* Код для обробки вирізання */ });
element.addEventListener('paste', function(event) { /* Код для обробки вставки */ });

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	41	22	10.1	28	12	4

Підтримка: мобільні переглядачі

Переглядач
	41	41	22	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<input type="text" id="textField" value="текст для прикладу" placeholder="Введи щось">

const textField = document.getElementById('textField');
textField.addEventListener('copy', (event) => {
  const selectedText = document.getSelection().toString();
  event.clipboardData.setData('text/plain', selectedText + ' - Скопійовано з сайту');
  event.preventDefault();
});

<input type="text" id="inputField" value="текст для прикладу" placeholder="Введи щось">

const inputField = document.getElementById('inputField');
inputField.addEventListener('paste', (event) => {
  const pastedData = event.clipboardData.getData('text/plain');
  if (!/^\d+$/.test(pastedData)) { // Дозволяє вставку тільки чисел
    alert('Можна вставляти лише числа');
    event.preventDefault();
  }
});

<header>
  <h2 class="title">Clipboard Events</h2>
  <p class="description">Дозволяє відстежувати і управляти діями копіювання, вставки та вирізання тексту.</p>
</header>
<main>
  <div class="result">
    <label for="clipboardInput">Введіть текст для взаємодії:</label>
    <textarea id="clipboardInput" rows="4" cols="40" placeholder="Напишіть щось тут..."></textarea>
    <br>
    <button id="copyButton">Скопіювати текст</button>
    <p id="clipboardStatus"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

textarea {
  width: 100%;
  margin-bottom: 10px;
  font-family: monospace;
  font-size: 14px;
}

button {
  padding: 10px 15px;
  font-size: 14px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#clipboardStatus {
  margin-top: 10px;
  color: #333;
  font-weight: bold;
}

const textarea = document.getElementById('clipboardInput');
const copyButton = document.getElementById('copyButton');
const clipboardStatus = document.getElementById('clipboardStatus');

// Копіювання тексту з textarea
copyButton.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
    clipboardStatus.textContent = 'Текст успішно скопійовано!';
    clipboardStatus.style.color = 'green';
  } catch (err) {
    clipboardStatus.textContent = 'Помилка при копіюванні!';
    clipboardStatus.style.color = 'red';
  }
});

// Відстеження подій вставки
textarea.addEventListener('paste', event => {
  const pastedData = event.clipboardData.getData('text');
  clipboardStatus.textContent = `Вставлено: ${pastedData}`;
  clipboardStatus.style.color = 'blue';
});

// Відстеження подій копіювання
textarea.addEventListener('copy', event => {
  clipboardStatus.textContent = 'Текст скопійовано користувачем.';
  clipboardStatus.style.color = 'green';
});

// Відстеження подій вирізання
textarea.addEventListener('cut', () => {
  clipboardStatus.textContent = 'Текст вирізано.';
  clipboardStatus.style.color = 'orange';
});
//# sourceURL=pen.js