Додому Html, CSS, Javascript Визначаємо подія копіювання, вирізання, вставки тексту в JQuery

Html, CSS, Javascript

Визначаємо подія копіювання, вирізання, вставки тексту в JQuery

по

04.10.2021

304

Практично на кожному сайті є текст, який звичним чином може бути скопійований, вирізаний (у випадку з формами), і вставлений. Для деяких завдань іноді потрібно відстежити цю дію користувача. Розглянемо простий приклад, як можна це справа реалізувати.
Для цієї задачі ми будемо використовувати JQuery, насправді тут немає складнощів, т. к. нам достатньо прив’язати обробник події до дій користувача.
Припустимо, у нас є проста html-форма, одним текстовим полем, присвоїмо id=textInp:

Пробуйте копіювати, вирізати, вставити текст:

Так само нам знадобиться блок, в якому ми будемо показувати повідомлення про дії користувача з текстом в полі. В моєму прикладі він перебуватиме після форми.

Тепер найголовніше, вішаємо обробник події на дане поле форми:

$(document).ready(function(){
$(“#textInp”).bind({
copy : function(){
$(‘#msg’).text(‘Ви скопіювали текст!’);
},
paste : function(){
$(‘#msg’).text(‘Ви вставили текст!’);
},
cut : function(){
$(‘#msg’).text(‘Ви вирізали текст!’);
}
});
});

Таким чином, при спробі скопіювати буде викликатися подія copy, вставити – paste, cut – cut за аналогією. Там же ми відправляємо на виведення повідомлення про дію.
Живий приклад.
На цьому все, успіхів у праці!

Додав: htmaker, 01.02.2015 р.
(3 голосів, середній: 2,33 з 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript