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

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

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

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

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

Ответ 1

Недавно мне пришлось неохотно отключить вставку в элемент формы. Для этого я написал кросс-браузерную * реализацию обработчика событий onpaste Internet Explorer (и других). Мое решение должно было быть независимым от каких-либо сторонних библиотек JavaScript.

Вот что я придумал. Он не полностью отключает вставку (например, пользователь может вставлять один символ за раз, например), но он отвечает моим потребностям и избегает иметь дело с keyCodes и т.д.

// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();

Чтобы использовать это, чтобы отключить вставку:

<input type="text" onpaste="return false;" />

* Я знаю, что oninput не является частью спецификации W3C DOM, но все браузеры, которые я тестировал с помощью этого кода: Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 и т.д. поддерживают либо oninput, либо onpaste. Из всех этих браузеров только Opera не поддерживает onpaste, но она поддерживает oninput.

Примечание. Это не будет работать на консоли или другой системе, использующей экранную клавиатуру (при условии, что экранная клавиатура не посылает ключи браузеру, если выбрана каждая клавиша). Если возможно, что ваша страница/приложение может быть использована кем-то с экранной клавиатурой и Opera (например, Nintendo Wii, некоторые мобильные телефоны), не используйте этот script, если вы не проверили, экранная клавиатура отправляет ключи в браузер после каждого выбора клавиши.

Ответ 2

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

Если вы хотите убедиться, что подтверждение электронной почты не работает, попросите пользователя проверить свой E-Mail во время ожидания вашего сайта ( "Пожалуйста, откройте свою программу электронной почты в новом окне" ). Показать адрес электронной почты в больших толстых письмах ("Подтверждение электронной почты было отправлено на.... сделало ошибку? Нажмите здесь, чтобы изменить).

Еще лучше, если можно, позвольте пользователю иметь ограниченный доступ без подтверждения. Таким образом, они могут войти в систему сразу, и вы улучшите свои шансы поддерживать связь с посетителем, даже если почта подтверждения заблокирована по другим причинам (например, спам-фильтры).

Ответ 3

Добавьте класс "disablecopypaste" к входам, на которые вы хотите отключить функциональность копирования, и добавьте этот jQuery script

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });

Ответ 4

Вы можете..... но не делайте этого.

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

Просто добавьте эти атрибуты в текстовое поле

ondragstart="return false" onselectstart="return false"

Ответ 5

Только что получив это, мы можем достичь этого с помощью onpaste:"return false" благодаря: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

У нас есть различные другие варианты, перечисленные ниже.

<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>

Ответ 6

Сумасшедшая идея: попросите пользователя отправить вам электронное письмо как часть процесса регистрации. Это, очевидно, было бы неудобно, если щелчок по ссылке mailto не работает (например, если они используют веб-почту), но я рассматриваю это как способ одновременно гарантировать опечатки и подтвердить адрес электронной почты.

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

Ответ 7

Как отправить электронное письмо с подтверждением на адрес электронной почты, который только что введенный пользователем дважды, в котором есть ссылка на URL-адрес подтверждения на вашем сайте, тогда вы знаете, что у них есть сообщение?

Любой, кто не нажимает, чтобы подтвердить получение электронной почты, может неправильно ввести свой адрес электронной почты.

Не идеальное решение, а лишь некоторые идеи.

Ответ 8

Расширяя @boycs, я бы рекомендовал также использовать "on".

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });

Ответ 9

Вы можете использовать jquery

HTML файл

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

код jquery

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

если вам нужно использовать 2 поля электронной почты и беспокоиться о том, что пользователь неправильно вставлял один и тот же ошибочный адрес электронной почты из поля 1 в поле 2, тогда я бы сказал, что предупреждает (или что-то более тонкое), если пользователь вставляет что-то в второе поле электронной почты

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

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

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

<input type="email" name="email" required autocomplete="email">

Ответ 13

из

Некоторые могут предлагать использовать 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.

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

HTML:

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

Код:

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

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

Ответ 17

как насчет использования 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

Ответ 18

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

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

Ответ 19

Я сделал что-то похожее на http://bookmarkchamp.com - там я хотел обнаружить, когда пользователь скопировал что-то в поле HTML. Реализация, с которой я столкнулся, заключалась в том, чтобы постоянно проверять поле, чтобы увидеть, было ли в любой момент там много текста.

Другими словами: если один раз в миллисекунду назад не было текста, и теперь их было больше 5 символов... тогда пользователь, вероятно, вставил что-то в поле.

Если вы хотите, чтобы это работало в программе Bookmarkhamp (вам нужно зарегистрироваться), вставьте URL-адрес в поле URL-адреса (или перетащите URL-адрес там).

Ответ 20

Способ устранения проблемы с подтверждением адреса электронной почты выглядит следующим образом:

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

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

Ответ 21

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

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

Ответ 22

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>