Javascript-форум - Вопрос про запрет на Ctrl+V в формах и разные версии jquery, а также поля HTML5

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вопрос про запрет на Ctrl+V в формах и разные версии jquery, а также поля HTML5 (https://javascript.ru/forum/misc/84079-vopros-pro-zapret-na-ctrl-v-v-formakh-i-raznye-versii-jquery-takzhe-polya-html5.html)

Вопрос про запрет на Ctrl+V в формах и разные версии jquery, а также поля HTML5

Стоит задача запретить пользователю на странице использовать 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>

однако с ним вышеуказанная функция не работает. Подскажите, пожалуйста, что с ней не так? Почему более поздняя версия не хочет работать с этим примером?

Если есть какие-то более удачные решения этого вопроса - подскажите, пожалуйста.

javascript_pupil,
в нормальном случае jquery грузят один раз, селекторы должны быть либо как в css, либо как в jquery, bind устарело.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Disabled Cut, Copy and Paste on all textboxes</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type=text],input[type=email],input[type=url],textarea').on('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>

Спасибо! С первым вопросом разобрался. А вот со 2-м пока нет: в документации Bootstrap 4 написано:

Цитата:

Place one of the following < script >s near the end of your pages, right before the closing < /body > tag, to enable them.

Что у меня и сделано. Но в этом случае функция перестает работать. Когда внутри head - все работает. Когда в конце страницы - нет. Конечно я могу и 2 раза эту строку внести, но как-то ненаучно получается.

Цитата:

Сообщение от рони

jquery грузят один раз

Да, но не работает так у меня. И менять фреймворк тоже не вариант, иначе в Bootstrap'е может что-то "посыпаться".

Как это исправить?

javascript_pupil,
Bootstrap блокирует использование $ , использовать в коде jQuery вместо $ или назначить любое другое название через noConflict()
https://ruseller.com/jquery?id=61