Стоит задача запретить пользователю на странице использовать Ctrl+V при заполнении формы обратной связи на сайте. Решается следующим примером кода:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disabled Cut, Copy and Paste on all textboxes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input:text,email,url,textarea').bind('cut copy paste', function(e) {
e.preventDefault();
alert("Cut / Copy / Paste Disabled");
});
});
</script>
</head>
<body>
<p>Type something and try to copy it</p>
<input type="text" class="myTextBox1" />
<input type="email" class="myTextBox2" />
<input type="url" class="myTextBox3" />
<textarea name="message" class="myTextBox4"></textarea>
</body>
</html>
Но есть несколько проблем, которые хотелось бы устранить:
1. Запрет на Ctrl+V не работает в новых полях (HTML5) типа ввода данных email и url, при этом работает в text и textarea. Можно ли как-то заставить это работать в полях email и url?
2. В приведенном примере javascript находится внутри HTML тега head и использует jquery 3.3.1. При этом в конце страницы перед HTML тегом body в случае с моим фреймворком (Bootstrap 4) уже используется следующий код:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
однако с ним вышеуказанная функция не работает. Подскажите, пожалуйста, что с ней не так? Почему более поздняя версия не хочет работать с этим примером?
Если есть какие-то более удачные решения этого вопроса - подскажите, пожалуйста.