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

Question

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

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

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

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

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

858 22

javascript html copy-paste

22 ответов:

Comments

Ничего не найдено.

Christopher Parker · Accepted Answer · 2009-11-12 22:55:05

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

Pekka 웃 · Accepted Answer · 2015-08-06 08:41:00

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

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

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

Boycs · Accepted Answer · 2012-01-10 03:17:20

добавьте класс "disablecopypaste" к входам, которые вы хотите отключить функцию копирования вставки и добавить этот скрипт jQuery
  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });

Sheff · Accepted Answer · 2009-08-04 13:00:54

вы можете..... но не надо.

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

просто добавьте эти атрибуты в текстовое поле
ondragstart=”return false” onselectstart=”return false”

Kailas · Accepted Answer · 2017-09-12 13:01:52

только что получил это, используя 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>

Josh Lee · Accepted Answer · 2009-11-12 23:02:21

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

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

Richard Lucas · Accepted Answer · 2009-08-04 13:20:41

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

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

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

e3matheus · Accepted Answer · 2017-05-23 15:34:42

расширения @boycs ответ, я бы рекомендовал также использовать "on".
$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });

Sunil Garg · Accepted Answer · 2017-07-03 22:37:54

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

HTML-файла
<input id="email" name="email">
код jquery
$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });

Kevin · Accepted Answer · 2009-08-04 13:09:54

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

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

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

Alsciende · Accepted Answer · 2009-08-04 16:21:59

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

shunryu111 · Accepted Answer · 2016-08-24 11:24:50

Если вам нужно использовать 2 поля электронной почты и вы обеспокоены тем, что пользователь неправильно вставляет одно и то же ошибочное сообщение из поля 1 в поле 2, я бы сказал, что вы показываете предупреждение (или что-то более тонкое), если пользователь вставляет что-то во второе поле электронной почты
document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}
таким образом, вы не отключаете вставку, вы просто даете им дружеское напоминание, чтобы проверить, что они предположительно набрали в первом поле, а затем вставили во второе поле правильно.

однако, возможно a единственное поле электронной почты с автозаполнением - это все, что нужно. скорее всего, они правильно заполнили свою электронную почту раньше на другом сайте в какой-то момент, и браузер предложит заполнить поле этим письмом
<input type="email" name="email" required autocomplete="email">

vaichidrewar · Accepted Answer · 2011-09-06 18:31:44

С

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

max · Accepted Answer · 2012-03-07 00:28:33

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

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

Damjan Pavlica · Accepted Answer · 2016-10-31 16:11:14

Я использую это решение vanilla JS:
const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())

Julius · Accepted Answer · 2018-08-10 00:05:30

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

HTML:
<input id="email" name="email">
код:
$(email).on('paste', false);
JSfiddle: https://jsfiddle.net/ZjR9P/2/

user275790 · Accepted Answer · 2010-02-18 07:39:32

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

S P Arif Sahari Wibowo · Accepted Answer · 2010-11-27 22:14:25

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

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

Ivan Maeder · Accepted Answer · 2010-12-17 14:31:06

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

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

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

Majix · Accepted Answer · 2013-09-15 06:39:39

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

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

создайте уникальный код и отправьте его на этот адрес электронной почты.

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

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

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

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

Krishna · Accepted Answer · 2015-03-17 21:30:03

используя jquery, вы можете избежать копирования вставить и вырезать с помощью этого
$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

Jignesh Vachhani · Accepted Answer · 2013-01-30 12:22:47

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>