JS властивість Event.cut

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

cut — це подія, яка виникає, коли користувач вирізає текст або інший вміст із веб-сторінки до буфера обміну. Подія cut дозволяє розробникам перехоплювати операцію вирізання і, при необхідності, змінювати вміст, який вирізається, або додавати додаткову логіку, наприклад, для відстеження або модифікації даних. Вона є частиною стандарту Clipboard API і часто використовується в веб-додатках для контролю над вмістом, який користувачі можуть вирізати, а також для забезпечення додаткових функціональних можливостей.

Щоб використати подію cut, розробник повинен додати обробник подій до конкретного елемента або до всього документа. У обробнику подій можна використовувати об'єкт event, який надає доступ до Clipboard API, дозволяючи змінювати вміст, що вирізається, або додавати додаткові операції. Наприклад:

document.addEventListener('cut', function(event) {
  event.preventDefault(); // Відміняє стандартну операцію вирізання
  const selectedText = window.getSelection().toString();
  event.clipboardData.setData('text/plain', `Вирізано: ${selectedText}`);
  console.log('Текст вирізано і змінено перед вставкою до буфера обміну.');
});

У цьому прикладі, коли користувач намагається вирізати текст зі сторінки, стандартна операція вирізання скасовується, і замість цього в буфер обміну копіюється модифікований текст із доданим префіксом "Вирізано: ". Це може бути корисно для контролю над вмістом, який користувачі можуть вирізати, або для додавання певного форматування чи метаданих.

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

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.addEventListener('cut', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	1	22	3	≤12.1	12	9

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

Переглядач
	4.4	18	22	3

Приклади

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

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

const sensitiveInput = document.getElementById('sensitiveInput');

sensitiveInput.addEventListener('cut', function(event) {
  event.preventDefault(); // Блокування вирізання з цього поля
  alert('Вирізання цього вмісту заборонено!');
});

document.addEventListener('cut', function(event) {
  event.preventDefault();
  const selectedText = window.getSelection().toString();
  const customText = `Вирізано з Example.com: ${selectedText}`;
  event.clipboardData.setData('text/plain', customText);
  console.log('Текст вирізано з доданим повідомленням.');
});