Как я могу избежать заполнения полей в форме регистрации в браузере?

Question

autocomplete="off" не то, что я после. По сути, в моей регистрационной форме есть поля «телефон» и «пароль», расположенные друг над другом. (см. скриншот)

Поле «телефон» досадно заполняется именем пользователя, так как я думаю, что делает браузер - браузер находит поле типа пароля и принимает поле ввода текста непосредственно перед тем, как оно становится полем имени пользователя. Эффект такой:

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

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

Есть идеи?

Используемая разметка:

<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">

Я получаю такое поведение в Chrome, FF (не уверен насчет IE, получил архаичную версию этого на моей машине, даже не хочу пока беспокоиться об IE).

Answer 1

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

Так что все, что вам нужно сделать, это добавить невидимый текст и поля пароля (display:none) над «новым паролем».

Firefox пытается интерпретировать 3 поля пароля как действие «изменить пароль», так что если вы не хотите, чтобы это было безопасно, добавьте еще одно невидимое поле пароля.

Answer 2

У меня была похожая проблема с полем ввода пароля.Попробуйте

<input type="password" autocomplete="new-password">

Из MDN вход документация:

автозаполнение

Этот атрибут указывает, может ли значение элемента управления быть автоматически завершеночерез браузер.

Возможные значения:

.... new-password: новый пароль (например, при создании учетной записи или изменении пароля)

Для номера телефона я установил это, и он прекратил автозаполнение имени пользователя там.

<input type="tel">

Answer 3

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

Также рассмотрим наличие 3 полей для номера телефона, кода города, префикса и суффикса. После того, как определенное количество цифр заполнено, вы можете автоматически фокусировать с помощью JavaScript следующее поле телефонного сегмента, чтобы пользователю было проще.

Вы также пытались изменить положение полей? Что случилось?

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

Кроме того, удалите неиспользуемые сохраненные данные автозаполнения формы, это может быть локальная проблема с вашей версией, возможно, вы ввели неверное значение однажды в одном из браузеров, а затем вы установили другой браузер (chrome или FF). ), а затем вновь установленный браузер скопировал правила точно так же, как они были из вашего исходного браузера .... Итак, вы в конечном итоге думаете, что это глобальная проблема с вашей формой, просто из-за одной неверной записи и потому, что ваш второй установленный браузер скопировал и скопировал неправильное правило ввода из вашего первого браузера, чтобы оно выглядело как настоящая универсальная проблема для вас, понимаете? Так что попробуйте режимы InPrivate для браузеров, или попробуйте браузеры из другой установки или с другого компьютера, или из имеющегося у вас экземпляра virtualpc.

В противном случае экспортируйте все настройки из своих браузеров и удалите оба браузера, затем переустановите с нуля FF и Chrome, затем протестируйте свою веб-страницу, а затем смело импортируйте экспортированные настройки обратно.

Кроме того, протестируйте IE, даже если это поможет вам понять, понимаете, о чем я?

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

UPDATE:

Учитывая выбранный вами метод, вы должны уметь при отображении поля телефона добавить атрибут value = "" во входной тег вместо использования JavaScript. Это должно предотвратить возникновение предварительной заливки без необходимости использования javascript. Теперь, если вы хотите пойти еще дальше, вы можете сделать это:

Во время события OnLoad, когда страница загружается, проверьте поле телефона, используя JavaScript, и, если значение равно одному пробелу (""), перезапишите его пустой строкой, используя JavaScript, после запуска onLoad. Или, если браузер все еще выполняет предварительное заполнение (я сомневаюсь, что это произойдет, но если это так), вы можете отложить эту проверку на несколько сотен миллисекунд и запустить javascript через несколько сотен миллисекунд после загрузки страницы, либо связать его со всеми или некоторыми из них. поля ввода событий onFocus, поэтому, как только любое из полей получит фокус, вы делаете «действительно, phone.value равно одному пробелу» («»), и если это так, перезапишите его и пустую строку, я еще больше определенно браузер не собирается подключаться и захватывать это поле в этой ситуации. Хотя, как уже упоминалось, даже если вы делаете это onLoad, я сомневаюсь, что браузер захватит ваше поле, так как загрузка страниц / javascript происходит ПОСЛЕ внутреннего браузера. Происходит событие onLoad (DocumentComplete), и в худшем случае вы можете использовать метод с задержкой в ​​несколько сотен миллисекунд или метод onFocus, но я сомневаюсь, что они вам понадобятся.

Дайте мне знать, как оно идет.

Answer 4

Я попытался отключить поля ввода type = text & type = password после загрузки DOM, затем включил все отключенные поля через определенные миллисекунды, скажем, 100. Кажется, это работает для меня. Попробуйте:

$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');

$("body").delay(10,function(){
    $("input[type=text],input[type=password]").prop('disabled','');
    });
});