Вимкнути вставку тексту у форму HTML


96

Чи є спосіб за допомогою JavaScript відключити можливість вставки тексту в текстове поле у ​​формі HTML?

Наприклад, у мене є проста реєстраційна форма, де користувач повинен ввести свою електронну пошту двічі. Другий запис електронної пошти - це переконатися, що в першому записі електронної пошти немає помилок. Однак, якщо користувач копіює / вставляє свою електронну пошту, це перешкоджає цілі, і у мене виникають проблеми з користувачами, оскільки вони ввели неправильний електронний лист і скопіювали / вставили його.

Можливо, я не зрозумів свого питання, але я не намагаюся перешкоджати людям копіювати (або перетягувати виділення) текст у своєму браузері. Я просто хочу зупинити їх від вставки вводу в текстове поле, щоб мінімізувати помилки користувача.

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


111
Зупинити людей від копіювання / вставки їх електронної адреси з адресної книги у браузер. Це піде добре.
Квентін

28
Не можу зробити багато, коли клієнт наполягає на зміні. насолоджуйтесь напоєм :)
justinl

15
Було б цілком нормально, якщо б він вимкнув вставлення в поле перевірки лише тоді, коли електронне повідомлення НЕ було вставлено в оригінальне поле. Іншими словами, користувачеві доведеться або вставити електронне повідомлення в обидва поля, або в жодне поле.
Дж.

25
Якщо клієнт просить про це, скажіть їм, наскільки це погана ідея. Це чудовий спосіб розсердити клієнта в той момент, коли він, швидше за все, просто піде (під час реєстрації). Ви не хочете, щоб відносини з клієнтами починалися з відчуження клієнта. Ця практика стає все більш поширеною та дедалі неприємнішою, оскільки все більше людей використовують менеджери паролів. Див. Також: ux.stackexchange.com/q/21062/9529 та ob. xkcd: xkcd.com/970
Mark Booth

Я знайшов це запитання, шукаючи, як перемогти цю "особливість" за допомогою інспектора елементів. Це спрацювало!
SVD

Відповіді:


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, але вона підтримує вхід.

Примітка: Це не буде працювати на консолі чи іншій системі, яка використовує екранну клавіатуру (припускаючи, що екранна клавіатура не надсилає клавіші в браузер, коли вибрано кожну клавішу). Якщо можливо, вашу сторінку / додаток може використовувати хтось із екранною клавіатурою та Opera (наприклад: Nintendo Wii, деякі мобільні телефони), не використовуйте цей сценарій, якщо ви не протестували, щоб переконатися, що екранна клавіатура надсилає ключі до браузера після кожного вибору ключа.


58
Щоб Firefox не підкорявся цьому дурному правилу, перейдіть до about: config та змініть dom.event.clipboardevents.enabled на false
lolesque

1
навіть якщо я не включаю js, який ви написали, я можу перешкодити користувачеві вставити що-небудь, просто включивши onpaste="return false", чи є якась проблема, якщо я піду з таким підходом
viveksinghggits

@viveksinghggits Код реалізований onpasteу браузерах, які цього ще не надають. Ви говорите: " Я в змозі запобігти користувачу нічого вставляти ", але в яких браузерах ви перевіряли це?
AnnanFay

Що стосується реалізації, я бачу два очевидні вдосконалення: 1) запускати код лише у браузерах, де його вставка ще не підтримується, 2) повторно виконати, коли DOM змінено - на даний момент він не застосовуватиметься до динамічно доданих входів.
AnnanFay

@Rick, значить, з текстовими областями, де користувачі можуть вставити в нього що завгодно, все в порядку? Оскільки вони очікують, що він буде виглядати точно так само на інших екранах, де відображаються вставлені дані, і вони будуть очікувати, що він буде виглядати точно так само, коли ці дані будуть вставлені в електронне повідомлення. Мені не потрібні телефонні дзвінки та електронні листи з підтримкою. Вимкнути вставку в певному полі - життєздатний варіант і питання, IMHO. Проблема більшості з нас полягає в тому, що ми використовуємо "Текстові редактори" - ці речі, здається, замінюють усі наявні команди javascript або jquery, щоб запобігти вставці.
McAuley

144

Не роби цього. Не возиться з браузером користувача. Копіюючи + вставляючи в поле підтвердження електронної пошти, користувач приймає відповідальність за те, що він вводить. Якщо вони досить німі, щоб скопіювати + вставити помилкову адресу (це трапилося зі мною), то це їхня бісова провина.

Якщо ви хочете переконатися, що підтвердження електронної пошти працює, попросіть користувача перевірити свою електронну пошту, поки ваш сайт чекає ("Будь ласка, відкрийте свою програму веб-пошти в новому вікні"). Показувати адресу електронної пошти великими жирними літерами ("Підтвердження електронного листа було надіслано на .... помилка? Клацніть тут, щоб змінити).

Ще краще, якщо ви можете, дозвольте користувачеві мати якийсь обмежений доступ без підтвердження. Таким чином, вони можуть увійти в систему відразу, і ви покращуєте свої шанси підтримувати зв’язок з відвідувачем, навіть якщо повідомлення-підтвердження заблоковано з інших причин (наприклад, спам-фільтри).


6
Я погоджуюсь з вашою відповіддю на сценарій, коли користувачі самі вводять дані. Однак, коли користувач вводить адресу електронної пошти від імені когось іншого (наприклад, CRM-системи або подібного), реалізувати своє рішення неможливо. У цих випадках користувач не вводить власну адресу електронної пошти, тому він, швидше за все, неправильно пише її. Якщо ви дозволите вставляти у вікно підтвердження електронної пошти, ви отримаєте багато неправильних даних, тому немає нічого поганого у запобіганні вставці. Як розробник ви повинні пом'якшити ситуацію проти "досить тупих" користувачів, щоб захистити дані бізнесу.
sheetiman

12
Також є поширений випадок, коли розробник, який розглядає це питання, практично не контролює вимоги проекту, над яким вони працюють. Це не відповідь на запитання, яке тут задають, тому -1.
Нік

4
Сказати, що не роби цього, не відповідає на питання. Наразі у мене є вимога, коли пасту слід відключити.
Даріан Еверетт

13
якщо вам коли-небудь дають такі вимоги, це ваша робота як професіонала відмовитись від цього. ви більше, ніж пара рук, які вміють писати код.
Dan Pantry

2
Але є вагомі причини майже для будь-чого, і не відповідь на чиєсь запитання, тому що ви не думаєте, що ЇХ причина є вагомою, дратує. Скажімо, у вас була вікторина, яку ви намагалися реалізувати зі складними відповідями. Якщо вимкнути вставлення та змусити студента ввести цілу відповідь, а не вставити копію, це змусило б їх записати відповідь у пам’ять, тоді як просто вставити копію, мабуть, було б ні до чого. Для цього є вагома причина. Попередити когось, що те, що вони намагаються зробити, у більшості випадків не є гарною ідеєю, але дайте відповідь ... або краще просто не турбуватися відповідями.
Halfhoot

69

Додайте клас 'disablecopypaste' до входів, на яких ви хочете відключити функцію копіювання, та додайте цей скрипт jQuery

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

1
У мене чудово працює, танки!
Габріель Глабер

26

Щойно отримав це, ми можемо досягти цього, використовуючи 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

Божевільна ідея: вимагайте від користувача надіслати вам електронного листа в рамках процесу реєстрації. Це, очевидно, було б незручно, коли натискання посилання на пошту не працює (якщо вони, наприклад, використовують веб-пошту), але я бачу це як спосіб одночасно гарантувати від помилок друку та підтвердити адресу електронної пошти.

Це могло б виглядати так: вони заповнюють більшу частину форми, вводячи своє ім’я, пароль та інше. Коли вони натискають "подати", вони фактично натискають посилання, щоб відправити пошту на ваш сервер. Ви вже зберегли їх іншу інформацію, тож повідомлення містить лише маркер із зазначенням, для якого облікового запису це призначено.


Ха, це чудова ідея.
justinl

7

Як щодо надсилання електронного листа з підтвердженням на електронну адресу, яку користувач щойно ввів двічі, у якій на вашому сайті є посилання на URL-адресу для підтвердження, тоді ви знаєте, що вони отримали повідомлення?

Той, хто не натискає, щоб підтвердити отримання електронного листа, може ввести свою адресу електронної пошти неправильно.

Не ідеальне рішення, а лише деякі ідеї.


4
У мене зараз це реалізація. Проблема полягає в тому, що користувач вважає, що не отримав електронне повідомлення через помилку з нашого боку, оскільки він перевіряє свою адресу електронної пошти, яку він вважає введеною, і не має електронної пошти. Крім того, трапляється так, що при спробі повторної реєстрації ім’я користувача, яке вони використовували, тепер недоступне, оскільки воно застрягло у цій неправильній адресі електронної пошти.
justinl

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

1
Дякуємо за коментар Я думаю, що якби ви спробували створити обліковий запис на веб-сайті, і там було сказано, що ваше ім’я користувача зайнято, чи повернулись би ви знову через 2 дні і спробувати ще раз? Мої думки, швидше за все, ні. Або ви створили новий обліковий запис з іншим іменем користувача в той же день, або ви не потурбувались повернутися на сайт, оскільки ви не могли зрозуміти, як зареєструватися, і сайт був "занадто складним".
justinl

8
Щоб продовжити те, що говорить Колін, ви можете припустити, що коли хтось намагається перереєструватися з тим самим іменем користувача та іншою адресою електронної пошти, але він не відповів на повідомлення про підтвердження, можливо, це дозволено їм це робити. Ви можете виявити, що люди вводять правильний домен у своїй електронній пошті, але неправильно пишуть своє ім’я користувача, і можете використовувати це для подальшого визначення, коли хтось допустив помилку?
Річард Лукас,

1
Мені дуже подобається така ідея дозволити перереєструватися користувачам, які ще не підтвердили інформацію про свій рахунок. Я думаю, що це дизайнерське рішення краще, ніж моє оригінальне технічне рішення. Почути від усіх інших, що зміна цієї функції браузера за замовчуванням була поганою ідеєю, було те, що мені потрібно було почути, щоб знайти краще рішення.
justinl

7

Ви можете використовувати jquery

Файл HTML

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

код jquery

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

6

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

$('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

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

Однак це не впорається з клацанням правою кнопкою миші та вставкою чи вставкою з меню "Редагувати" браузера. Можливо, вам потрібно буде додати лічильник "останньої довжини" до слухача клавіш і скористатися інтервалом, щоб перевірити поточну довжину поля, щоб побачити, чи збільшилася вона з моменту останнього натискання клавіші.

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


Не потрібне клацання правою кнопкою миші чи навіть що-небудь із Apple, Unix чи ctrl-ins, а як щодо 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.


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

так, я подбаю наступного разу
vaichidrewar

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())

1

За допомогою Jquery ви можете зробити це за допомогою однієї простої кодової лінії.

HTML:

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

Код:

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

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



0

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

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


0

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

Іншими словами: якщо колись мілісекунди тому тексту не було, а зараз більше 5 символів ..., то користувач, можливо, щось вставив у поле.

Якщо ви хочете побачити цю роботу в Bookmarkchamp (потрібно зареєструватися), вставте URL-адресу в поле URL-адреси (або перетягніть туди URL-адресу).


0

Я вирішував питання підтвердження електронної адреси таким чином:

  1. Перш ніж пройти основний процес - скажімо, зареєструвати користувача - спочатку попросіть його ввести свою електронну адресу.
  2. Створіть унікальний код та надішліть його на цю електронну адресу.
  3. Якщо користувач ввів правильну електронну адресу, він отримає код.
  4. Користувач повинен ввести цей код разом зі своєю адресою електронної пошти та іншою необхідною інформацією, щоб він міг завершити реєстрацію. - Зверніть увагу, що якщо цього разу вони ввели неправильну адресу електронної пошти (або неправильний код), оскільки він не буде збігатися з кодом, реєстрація не пройде, і користувач буде негайно проінформований.
  5. Якщо адресу електронної пошти, код та іншу реєстраційну інформацію було введено правильно, реєстрація завершена, і користувач може негайно розпочати користуватися системою. - немає необхідності відповідати на будь-яку іншу електронну адресу, щоб активувати свій рахунок

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


0

Ви можете вимкнути опцію копіювання вставки за допомогою jQuery за наведеним нижче сценарієм. jQuery ("input"). attr ("onpaste", "return false;");

з використанням нижньої опасти атрибута у полях введення.

onpaste = "повернути false;"


-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.