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 може використовуватися для злочинних цілей, таких як спроба обмежити можливість копіювання або вирізання певного контенту. Це може викликати роздратування користувачів, тому використання цієї події повинно бути обґрунтованим і враховувати зручність користувачів.
| Порада: | Будьте обережні, використовуючи подію |
| Порада: | Використовуйте подію |
| Порада: | Щоб запобігти вирізанню конфіденційної інформації або важливих елементів, розгляньте можливість відміни події |
Синтаксис
element.addEventListener('cut', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може вводити або виділяти текст у текстовому полі. Якщо перемикач "Заборонити вирізання" увімкнений, спроба вирізання тексту буде заблокована, і замість цього в буфер обміну буде додано попередження "Вирізання цього тексту заборонено!". Якщо перемикач вимкнений, текст буде вирізано нормально. Це демонструє, як можна використовувати подію cut для управління діями користувачів на веб-сторінці і забезпечення безпеки вмісту.
У цьому прикладі текст, який користувач вирізає, автоматично доповнюється повідомленням "Вирізано з Example.com:". Це може бути корисно для забезпечення належного цитування або захисту авторських прав на вміст сайту.
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('Текст вирізано з доданим повідомленням.');
});У цьому прикладі вирізання тексту з певного текстового поля заборонено. Це корисно для запобігання вирізанню конфіденційної інформації або важливих даних, які не повинні покидати межі сайту або додатка.
const sensitiveInput = document.getElementById('sensitiveInput');
sensitiveInput.addEventListener('cut', function(event) {
event.preventDefault(); // Блокування вирізання з цього поля
alert('Вирізання цього вмісту заборонено!');
});