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

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

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

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

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

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

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

// 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, некоторые мобильные телефоны), не используйте этот скрипт, если вы не проверили, что экранная клавиатура отправляет ключи в браузер после каждого выбора ключа.

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

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

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

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

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

Только что получил это, мы можем добиться этого с помощью 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>

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

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

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

ondragstart=”return false” onselectstart=”return false”

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

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

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

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

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

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

HTML файл

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

код jquery

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

Продление @boycs ответ, я бы рекомендовал также с помощью «на».

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

если вам нужно использовать 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">

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

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

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

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

из

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

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

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

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

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

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

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

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

HTML:

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

Код:

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

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

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

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

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

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

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

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

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

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

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

Вы можете отключить опцию копирования и вставки с помощью jQuery с помощью сценария ниже. jQuery ("ввод"). attr ("onpaste", "return false;");

of, используя указанный ниже атрибут oppaste в полях ввода.

onpaste = "вернуть ложь;"

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>