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


96

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

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

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

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


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

28
Не могу ничего сделать, если клиент настаивает на изменении. наслаждайся напитком :)
Justinl 07

15
Было бы прекрасно, если бы он отключил вставку в поле проверки только тогда, когда электронное письмо НЕ было вставлено в исходное поле. Другими словами, пользователю придется либо вставить электронное письмо в оба поля, либо ни в одно из полей.
GJ.

25
Если клиент просит об этом, скажите ему, насколько это плохая идея. Это отличный способ разозлить клиента прямо в тот момент, когда он, скорее всего, просто уйдет (во время регистрации). Вы не хотите, чтобы отношения с клиентом начинались с отчуждения клиента. Эта практика становится все более распространенной и вызывает все больше возражений по мере того, как все больше людей используют менеджеры паролей. См. Также: ux.stackexchange.com/q/21062/9529 и ob. xkcd: xkcd.com/970
Марк Бут

Я нашел этот вопрос, когда искал, как победить эту «особенность» с помощью инспектора элементов. Это сработало!
СВД

Ответы:


53

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


59
Чтобы Firefox не подчинялся этому дурацкому правилу, перейдите по ссылке about: config и измените dom.event.clipboardevents.enabled на false
lolesque

1
даже если я не включаю написанные вами js, я могу запретить пользователю вставлять что-либо, просто включив onpaste="return false", есть ли какие-нибудь проблемы, если я
буду придерживаться

@viveksinghggits Код реализуется onpasteв браузерах, которые его еще не предоставляют. Вы говорите: « Я могу запретить пользователю вставлять что-либо », но в каких браузерах вы это тестировали?
AnnanFay

Что касается реализации, я вижу два очевидных улучшения: 1) запускать код только в тех браузерах, где onpaste он еще не поддерживается, 2) повторное выполнение при изменении DOM - в настоящее время он не будет применяться к динамически добавляемым входам.
AnnanFay

@Rick, ты не против текстовых полей, куда пользователи могут вставлять что угодно? Потому что они будут ожидать, что он будет выглядеть точно так же на других экранах, где отображаются вставленные данные, и они будут ожидать, что он будет выглядеть точно так же, когда эти данные будут вставлены в электронное письмо. Мне не нужны телефонные звонки и электронные письма поддержки, которые будут приходить с этим. Отключить вставку в определенное поле - жизнеспособный вариант и вопрос, ИМХО. Проблема, с которой сталкивается большинство из нас, заключается в том, что мы используем «Редакторы форматированного текста» - эти вещи, кажется, отменяют любые присутствующие команды javascript или jquery, чтобы предотвратить вставку.
McAuley

144

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

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

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


6
Я согласен с вашим ответом для сценария, когда пользователи вводят данные сами. Однако, когда пользователь вводит адрес электронной почты от имени другого лица - например, системы CRM или аналогичной - реализовать ваше решение невозможно. В этих случаях пользователь не вводит свой собственный адрес электронной почты, поэтому они могут ошибиться в его написании. Если вы разрешите вставку в поле подтверждения электронной почты, вы получите много неверных данных, поэтому нет ничего плохого в том, чтобы предотвратить вставку. Как разработчик, вы должны бороться с «достаточно глупыми» пользователями, чтобы защитить бизнес-данные.
heetiman

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

4
Сказать «не делай этого» не ответит на вопрос. В настоящее время у меня есть требование отключить пасту.
Дариан Эверетт

13
если вам когда-либо будет предъявлено подобное требование, ваша работа как профессионала - отказаться от него. вы больше, чем пара рук, которые могут писать код.
Dan Pantry

2
Но есть веские причины почти для всего, и отказ от ответа на чей-то вопрос, потому что вы не думаете, что ИХ причина действительна, раздражает. Допустим, у вас был тест, который вы пытались реализовать со сложными ответами. Отключение вставки и принуждение учащегося вводить весь ответ вместо копирования вставки заставит их зафиксировать ответ в памяти, тогда как просто копирование вставки, вероятно, будет бесполезным. Для этого есть веская причина. Предупредите кого-нибудь, что то, что он пытается сделать, в большинстве случаев не является хорошей идеей, но дайте ответ ... или лучше просто не утруждать себя ответом.
Halfhoot 02

69

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

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

1
У меня отлично работает, танки!
Габриэль Глаубер

27

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

16

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

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

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

ondragstart=”return false onselectstart=”return false

6
вопрос в отключении вставки. этот метод только затруднит копирование и не повлияет на вставку вообще.
bendman 02

10

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

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


Ха, отличная идея.
Justinl

7

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

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

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


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

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

1
Спасибо за комментарий. Я бы подумал, что если бы вы попытались создать учетную запись на веб-сайте, и он сказал бы, что ваше имя пользователя было занято, вы вернетесь снова через 2 дня и попробуете снова? Мои мысли, скорее всего, нет. Либо вы создали новую учетную запись с другим именем пользователя в тот же день, либо вы не удосужились вернуться на сайт, потому что не могли понять, как зарегистрироваться, и сайт был «слишком сложным».
Justinl

8
Продолжая то, что говорит Колин, вы могли бы предположить, что когда кто-то пытается перерегистрироваться с тем же именем пользователя и другим адресом электронной почты, но он не ответил на сообщение с подтверждением, вероятно, можно позволить им сделать это. Вы можете обнаружить, что люди правильно указали свой домен в своей электронной почте, но неправильно написали свое имя пользователя и могли бы использовать это для дальнейшего определения, когда кто-то сделал ошибку?
Ричард Лукас,

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

7

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

HTML файл

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

код jquery

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

6

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

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

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

3

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

2

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

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

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


Ни щелчка правой кнопкой мыши, ни даже чего-либо из яблок, Unix или клавиш Ctrl, а как насчет iPhone?
Martlark

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

2

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


1

из

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


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

дааа, в следующий раз я
позабочусь

1
Почему бы не начать сейчас с описания того, что "очень хорошо объяснено", вот как вы получаете голоса за и лучшую репутацию :)
Кев

Какое оправдание может быть для (попытки) отключения автозаполнения? «Мы ненавидим наших пользователей!» ? Если вы пытаетесь быть врагом пользователя, они будут ненавидеть вас, но в конце концов все равно победят, потому что они контролируют браузер.
Ян

1

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

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


1

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

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

1

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

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



0

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

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


0

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

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

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


0

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

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

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


0

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

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

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


-1
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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.