Как отключить автозаполнение браузера в поле веб-формы / теге ввода?

Question

Как отключить autocomplete в основных браузерах для определенного input (или form field)?

Answer 1

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

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

<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type="password" id="txtPassword" style="display:none;" />
<!-- This is the real password input -->
<input type="password" id="txtThisIsTheRealPassword" />

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

Answer 2

Я использую это TextMode="password" autocomplete="new-password" и загрузку страницы в aspx txtPassword.Attributes.Add("value", '');

Answer 3

Google Chrome игнорирует атрибут autocomplete="off" для определенных входных данных, включая ввод пароля и общие входные данные, обнаруженные по имени.

Например, если у вас есть ввод с именем address, Chrome предоставит предложения автозаполнения с адресов, введенных на других сайтах, , даже если вы скажете, что не :

<input type="string" name="address" autocomplete="off">

Если вы не хотите, чтобы Chrome делал это, вы можете переименовать или указать пространство имен имени поля формы:

<input type="string" name="mysite_addr" autocomplete="off">

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

<input type="string" name="mysite_addr" autocomplete="on">

Answer 4

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

ismxfilled="0" для OFF

или

ismxfilled="1" для ON

Answer 5

Невозможно достичь этого без использования сочетания кода на стороне клиента и на стороне сервера.

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

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

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

Вот скрипка, которая демонстрирует javascript, css и html, как описано в # 2 https://jsfiddle.net/xnbxbpv4/

JavaScript:

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

css:

.disable-input {
  display: none;
}

html:

<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>

Вот примерный пример того, как серверный код, использующий asp.net с бритвой, мог бы упростить # 1

модель:

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

контроллер:

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

вид:

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}

Answer 6

Чтобы решить эту проблему, я использовал несколько хитростей CSS и следующие работы для меня.

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Пожалуйста, прочитайте эту статью для более подробной информации.

Answer 7

Чтобы предотвратить автоматическое заполнение браузером сохраненными пользователем учетных данных для входа на сайт, поместите поле ввода текста и пароля в верхней части формы с непустыми значениями и стилем «position: absolute; top: -999px; слева: -999px» установить, чтобы скрыть поля.

<form>
  <input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <!-- Place the form elements below here. -->
</form>

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

Важно, чтобы значения полей text и password не были пустыми, чтобы в некоторых случаях значения по умолчанию не перезаписывались.

Важно, чтобы эти два поля были перед полем (полями) "реального" типа пароля в форме.

Для новых браузеров, поддерживающих html 5.3, должно работать значение атрибута автозаполнения "new-password".

<form>
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

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

<form>
  <div style="display:none">
    <input type="text" readonly tabindex="-1" />
    <input type="password" readonly tabindex="-1" />
  </div>
  <!-- Place the form elements below here. -->
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

Answer 8

Если вы хотите, чтобы общий плагин браузера LastPass также не заполнял поле автоматически, вы можете добавить атрибут data-lpignore="true", добавленный к другим предложениям в этой теме. Обратите внимание, что это относится не только к полям пароля.

<input type="text" autocomplete="false" data-lpignore="true" />

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

Answer 9

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

<input id='input_password' type='text' autocomplete='off' autofocus>

Есть переменная с именем "input", установленная как пустая строка ...

var input = "";

События поля контролируются JQuery ...

1. В фокусе содержимое поля и связанная с ним переменная «input» всегда очищаются.
2. При нажатии клавиш любой буквенно-цифровой символ, а также некоторые определенные символы добавляются к переменной «input», а поле ввода заменяется символом маркера. Кроме того, при нажатии клавиши Enter набранные символы (хранящиеся в переменной «input») отправляются на сервер через Ajax. (См. «Сведения о сервере» ниже.)
3. При нажатии клавиш Home, End и Arrow клавиши «input» и значения полей сбрасываются. (Я мог бы привыкнуть к навигации по стрелкам и событию focus и использовать .selectionStart, чтобы выяснить, где пользователь щелкнул или осуществлял навигацию, но это не стоит усилий для поля пароля.) Кроме того, нажатие клавиши Backspace усекает оба переменная и содержимое поля соответственно.

---

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

---

Краткое описание фронта

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

---

Сведения о сервере (дополнительное чтение)

Как показано выше, Javascript выполняет location.reload (), как только сервер возвращает ответ JSON. (Этот метод входа предназначен для доступа к ограниченному инструменту администрирования. Некоторые излишки, связанные с содержимым cookie, могут быть пропущены для более обобщенной реализации.) Вот подробности:

• Когда пользователь переходит на сайт, сервер ищет допустимый файл cookie.
• Если файлов cookie нет, отображается страница входа. Когда пользователь вводит пароль и отправляется через Ajax, сервер подтверждает пароль, а также проверяет чтобы увидеть, есть ли IP пользователя в списке авторизованных IP.
• Если пароль или IP-адрес не распознаны, сервер не создает файл cookie, поэтому при перезагрузке страницы пользователь видит ту же страницу входа.
• Если и пароль, и IP распознаны, сервер генерирует файл cookie с десятиминутным сроком службы, в котором также хранятся два зашифрованных значения, соответствующих временным рамкам и IP-адресу.
• Когда страница перезагружается, сервер находит cookie и проверяет, что скремблированные значения верны (т. е. период времени соответствует дате cookie и IP-адрес совпадает).
• Процесс проверки подлинности и обновления cookie повторяется каждый раз, когда пользователь взаимодействует с сервером, когда он входит в систему, отображает данные или обновляет запись.
• Если значения cookie всегда правильные, сервер представляет полный веб-сайт (если пользователь входит в систему) или выполняет запрос на отображение или обновление, который был отправлен.
• Если в любое время значения cookie неверны, сервер удаляет текущий cookie, который после перезагрузки вызывает страницу входа в систему. повторно отображается.

Answer 10

Попробуйте это:

<input type='text' autocomplete='off' />