Отключить вставку текста в HTML-форму

Question

Есть ли способ с помощью JavaScript отключить возможность вставки текста в текстовое поле в форме HTML?

например. У меня есть простая форма регистрации, где пользователь должен ввести свой адрес электронной почты дважды. Вторая запись электронной почты должна подтвердить, что в первой записи электронной почты нет опечаток. Однако, если пользователь копирует / вставляет свою электронную почту, то это противоречит цели, и у меня возникают проблемы с пользователями, потому что они ввели неправильную электронную почту и скопировали / вставили ее.

Возможно, я не совсем понял свой вопрос, но я не пытаюсь помешать людям копировать (или перетаскивать выделение) текст в своем браузере. Я просто хочу остановить их от вставки ввода в текстовое поле, чтобы минимизировать ошибку пользователя.

Возможно, вместо использования этого "хака", вы можете предложить другое решение основной проблемы, которую я пытаюсь решить здесь? Я провел менее полдюжины пользовательских тестов, и это уже происходило дважды. Моя аудитория не имеет высокого уровня владения компьютером.

Answer 1

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

Answer 2

Вы можете подключить слушателя «keydown» к блоку ввода, чтобы определить, нажимаются ли клавиши Ctrl + V, и, если это так, остановить событие или установить значение поля ввода на «».

Это не будет обрабатывать щелчки правой кнопкой мыши, вставку или вставку из меню «Правка» браузера. Возможно, вам понадобится добавить счетчик «последней длины» к слушателю нажатия клавиш и использовать интервал для проверки текущей длины поля, чтобы увидеть, увеличивается ли она с момента последнего нажатия клавиши.

Ни то, ни другое не рекомендуется. Поля формы с отключенной вставкой крайне разочаровывают. Я могу правильно напечатать свою электронную почту в первый раз, поэтому я оставляю за собой право вставить ее во второе поле.

Answer 3

Проверка правильности записи MX хоста данного электронного письма. Это может устранить ошибки справа от знака @.

Это можно сделать с помощью вызова AJAX перед отправкой и / или на стороне сервера после отправки формы.

Answer 4

от

Некоторые могут предложить использовать Javascript для захвата действий пользователя, таких как щелчок правой кнопкой мыши или комбинации клавиш Ctrl + C / Ctrl + V, а затем остановка операции. Но это, очевидно, не лучшее или самое простое решение. Решение интегрируется в свойствах поля ввода вместе с захватом некоторых событий с использованием Javascript.

Чтобы отключить автозаполнение браузера, просто добавьте атрибут в поле ввода. Это должно выглядеть примерно так:

<input type="text" autocomplete="off">

И если вы хотите запретить копирование и вставку для этого поля, просто добавьте событие Javascript, захватывающее вызовы oncopy, onpaste и oncut, и сделайте так, чтобы они возвращали false, например:

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

Следующим шагом является использование onselectstart, чтобы запретить выбор содержимого поля ввода от пользователя, но имейте в виду: это работает только для Internet Explorer. Остальное из вышеперечисленного прекрасно работает во всех основных браузерах: Internet Explorer, Mozilla Firefox, Apple Safari (по крайней мере, в ОС Windows) и Google Chrome.

Answer 5

С Jquery вы можете сделать это с помощью одной простой кодовой строки.

HTML:

<input id="email" name="email">

Код:

$(email).on('paste', false);

JSfiddle: https://jsfiddle.net/ZjR9P/2/

Answer 6

Я использую это ванильное решение JS:

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())

Answer 7

Hope below code will work :

<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Answer 8

как насчет использования CSS в UIWebView? что-то вроде

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

также вы можете прочитать подробности о блок-копировании-вставке с помощью CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Answer 9

Простое решение: просто измените процесс регистрации: вместо запроса подтверждения в конце процесса регистрации, запросите подтверждение в начале! То есть Процесс регистрации начался с простой формы, запрашивающей адрес электронной почты и ничего больше. После отправки отправляется электронное письмо со ссылкой на страницу подтверждения, уникальную для адреса электронной почты. Пользователь переходит на эту страницу, после чего запрашивается остальная информация для регистрации (имя пользователя, полное имя и т. Д.).

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

Answer 10

Используя jquery, вы можете избежать копирования, вставки и вырезания, используя

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});