Приветствую вас дорогие друзья! В этой коротенькой статье мы познакомимся с довольно интересными и специфичными событиями copy, cut, paste которые появились вместе с приходом html5. Итак, поехали!

Для тех кто немного знаком с Английским не составит труда догадаться что:

copy - событие которое происходит в результате копирования контента.

cut - событие активируется при вырезании контента.

paste - событие когда мы что то вставляем из буфера обмена.

Пример, допустим у нас есть текстовое поле и мы хотим отслеживать все эти события по отношению к нему.

<input type="text" oncopy="console.log('Скопировали текст из поля');" oncut="console.log('Вырезали текст из поля');" onpaste="console.log('Вставили текст');" />

Здесь мы инициализировали события через атрибуты oncopy, oncut, onpaste. Теперь как только поле будет в фокусе и мы совершим любое из трех действий(копирование,вырезание, вставка), то нам в консоль браузера выведется соответствующее сообщение о том что мы сделали.

События также можно отловить через javascript код:

<input type="text" />
<script>
    document.querySelector('input').addEventListener('copy', function(){
      console.log('Скопировали текст из поля');
    });
    document.querySelector('input').addEventListener('cut', function(){
      console.log('Вырезали текст из поля');
    });
    document.querySelector('input').addEventListener('paste', function(){
      console.log('Вставили текст в поле');
    });
</script>

Результат будет аналогичным.

Переходим к практике! Ситуация: вы хотите чтобы пользователь водил информацию в поле строго в ручную без копипаста.

Для этого мы можем воспользоваться следующим кодом:

<input type="text" id="text" />
<script>
    document.querySelector('#text').addEventListener('paste', function(){
      var v = this.value;
      setTimeout(function(){
        document.querySelector('#text').value = v;
      },1);
    });
</script>

Любая информацию вставленная с помощью копипаста(ctrl + v) будет сразу же очищаться.

Идем дальше! События copy, cut и paste можно применять к абсолютно любому элементу и это просто замечательно.

Пример: мы хотим донести до пользователя ворующего наш контент что это не хорошо!

<p id="p">Наш контент который нельзя копировать!</p>
<script>
    document.querySelector('#p').addEventListener('copy', function(){
      alert('А ты знаешь, что копировать чужой контент не хорошо!');
    });
    document.querySelector('#p').addEventListener('cut', function(){
      alert('А ты знаешь, что копировать чужой контент не хорошо!');
    });
</script>

С помощью данного кода мы выводим модальное окно с сообщением - 'А ты знаешь, что копировать чужой контент не хорошо!', для тех кто попробовал скопировать или вырезать контент нашего элемента. Тут можно придумать массу возможных вариантов запугиваний и предупреждений, включая отслеживание часто копируемого и востребованного контента.

Для более жесткого пресечения можно воспользоваться данным методом:

<p id="p">Привет как дела!</p>
<script>
    document.querySelector('#p').addEventListener('copy', function(){
      this.innerHTML = "";
    });
    document.querySelector('#p').addEventListener('cut', function(){
      this.innerHTML = "";
    });
</script>

При копировании или вырезке контент будет удален. Так как события copy, paste, cut срабатывают до операций с буфером обмена, в результате контент не будет скопирован.

Конечно это не дает никаких гарантий что пользователь все равно не доберется до вашего контента через исходный код. Но для многих это станет настоящим сюрпризом.

Вот так, вы на практике можете пользоваться данными событиями(copy,cut,paste). На этом у меня все.

Надеюсь данная статья была для вас интересной и полезной. Не забудьте оценить статью! Оставляйте комментарии и задавайте вопросы!

Есть группа

Вк.

С вами был Грибин Андрей. Желаю вам всего хорошего! Пока.