Рубрики
Без рубрики

Как предотвратить вставку в поля ввода

Короткий фрагмент JavaScript, чтобы помешать пользователям вставить контент в поля формы. Tagged с JavaScript, HTML, WebDev.

Редактировать 01/02/19: Я был разочарован еще одной веб -формой, которая не позволила бы мне вставить свой пароль в поле подтверждения пароля, подумал, как это было сделано, и решил написать об этом. Мое намерение в этом посте состояло в том, чтобы оставаться беспристрастным относительно того, должны ли вы или не должны делать это, и побудить вас принять собственное решение. Тем не менее, я также настоятельно рекомендую вам Прочитайте обсуждение ниже этого поста, так как он ясно показывает, насколько нежелательная и ненужная эта функция Анкет

Спасибо членам сообщества Dev за все ваши комментарии и отзывы и за то, что он сделал этот сайт такой позитивной частью Интернета!

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

Как достигается эта функция? Как вы можете помешать своим пользователям вставить контент в поле HTML ввода?

Мы можем использовать JavaScript для нацеливания поля ввода вставьте событие и изменить, как это работает:




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

Попробуйте это в примере CodePen ниже:

Есть также события для вырезать и копия действие.

В современных браузерах есть хорошая поддержка. Эти события являются частью Буфер обмена API Анкет API буфера обмена также включает в себя доступ к содержимому буферу обмена, который имеет различные уровни поддержки. Смотрите Caniuse Table для API буфера обмена Чтобы получить больше информации.

Стоит ли отключить функцию вставки?

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

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

Оригинал: “https://dev.to/clairecodes/how-to-prevent-pasting-into-input-fields-nn”