Autocomplete = 'off' не работает, когда тип ввода является паролем и делает поле ввода над ним, чтобы включить автозаполнение

У меня есть форма с отключенным автозаполнением, но она не работает и делает автозаполнение включенным в firefox и более высокой версии chrome

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

При изменении типа с паролем на текст он работает во всех браузерах. Может ли кто-нибудь помочь решить эту проблему?

Ответы

Ответ 1

У браузера обычно есть две связанные, но разные функции, касающиеся форм:

Форма автозаполнения, где элементы типа <input type="text"> (и аналогичные) собирают типизированные значения и предлагают их обратно в виде раскрывающегося списка.
(Это простая функция, которая работает довольно а.)
Менеджер паролей, где браузер запрашивает помнить комбинации имени пользователя и пароля, когда он обнаруживает, что вы отправили форму для входа. При возврате на сайт большинство браузеров отображают доступные имена пользователей в раскрывающемся списке (Firefox, Chrome, Internet Explorer...), но у некоторых есть кнопка на панели инструментов (Opera). Кроме того, Chrome выделяет поля в желтом жестком коде.
(Это зависит от эвристики и может сбой на определенных страницах.)

Есть краевой регистр с формами, помеченными как autocomplete="off". Что произойдет, если это форма входа и пользователь ранее сохранил имя пользователя/пароль? Фактически удаление пароля из локальной базы данных выглядит неуместным, поэтому, вероятно, браузер не делает этого. (Фактически, данные из автозаполнения формы также не стираются.) Firefox решает дать пользователю власть: у вас есть пароль, поэтому я позволю вам использовать его. Chrome решает дать власть сайту.

Ответ 2

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

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />

Ответ 3

Когда я столкнулся с той же проблемой, я решил, создав временное текстовое поле над полем пароля и скрою его

как это,

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

Это приведет к тому, что текстовое поле username не будет отображать ранее введенные слова в раскрывающемся списке. Поскольку для поля ввода <input type="text" style="display:none;"> нет атрибута типа name, id, он также не отправляет никаких дополнительных параметров.

Я не уверен, что это хорошая практика, но она решит проблему.

Ответ 4

Это предотвратит автоматическое заполнение пароля в поле ввода (type = "password").

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

Ответ 5

Просто добавьте атрибут autocomplete="new-password" в поле ввода пароля.

Чтобы узнать больше об autocomplete: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

Ответ 6

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

<input type="password" id="Password" name="Password" 
       autocomplete="new-password" 
       onblur="this.setAttribute('readonly', 'readonly');" 
       onfocus="this.removeAttribute('readonly');" readonly>

И это довольно чистое решение тоже :)

Ответ 7

Для типа текста используйте autocomplete="off" или autocomplete="false"

<input id="username" type="text" autocomplete="false">

Для типа пароля используйте autocomplete="new-password"

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

Ответ 8

Вот хак, который, кажется, работает в Firefox и Chrome.

В Firefox, отключенное текстовое поле перед полем пароля, похоже, делает трюк, даже если оно скрыто (отключено: нет)

В Chrome у него есть, чтобы быть видимым.

Итак, я предлагаю что-то вроде этого:

HTML:

<input class="password-autocomplete-disabler" type="text" disabled>
<input type="password" name="pwd">

CSS:

input[type=text].password-autocomplete-disabler {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Ответ 9

Мое решение, вдохновленное здесь, выглядит следующим образом:

<form>
    <input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    <input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    Username: <input type="text">
    Password: <input type="password">
    <input type="submit">
</form>

Конечно, он уродлив, чувствует себя неуместным в 2017 году, но он работает и защищает поле имени пользователя и пароля от автозаполнения. Обратите внимание, что в Firefox (версия 51 на момент написания) не имеет значения, какая комбинация name, id или autocomplete используется, будь то в форме или в полях ввода. Без первых двух фиктивных полей автозаполнение будет выполняться в любой временной области, и это разрушит ваш день.

Ответ 10

Что сработало для меня, было использование autocomplete = "new-password" только в input type = "password", например:

<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">

Независимо от того, сколько входных данных имеет форму.

Ответ 11

Недавно я столкнулся с этой проблемой, и не имея простого решения, поскольку мои поля могут быть предварительно заполнены, я хотел поделиться элегантным хаком, который придумал, установив тип пароля в событии ready.

Не объявляйте поле ввода как тип пароля при его создании, но добавьте готовый прослушиватель событий, чтобы добавить его для вас с помощью jQuery:

<input type="text" name="pswd" id="password" maxlength="16" size="20" >

<script>
$(function(){
    document.getElementById('password').setAttribute('type', 'password');
});
</script>

Ответ 12

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

Ответ 13

Добавление autocomplete="off" не собирается вырезать его - оно игнорируется Chrome.

Измените атрибут типа ввода на type="search".
Google не применяет автоматическое заполнение к входам с типом поиска.

Ответ 14

Почему не все это используют...

        <form>
            <div class="user">
            <i> </i>
            <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
            </div>          
            <div class="user1"> 
            <i> </i>        
            <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
            </div>
            <div class="user2">                         
            <input type="submit" value="Login">
            </div>
        </form>

Это так просто...:)

Ответ 15

Мой зол:

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

function turnOnPasswordStyle(){
    $('#inputpassword').attr('type', "password");
}

Ответ 16

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

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
        <input type="password" style="display: none;" value="dummyinput1"/>
        <input type="password" style="display: none;" value="dummyinput2"/>
        <input type="password" style="display: none;" value="dummyinput3"/>
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

Ответ 17

Для пароля он не работает в настоящее время.

Поэтому по умолчанию сделайте поле пароля в виде текста и используйте следующий код js.

$('#real-password').on('input', function(){
            if ($(this).val() !== '') {
                $(this).attr('type', 'password');
            } else {
                $(this).attr('type', 'text');
            }
   });

Ответ 18

autocomplete=off в основном игнорируется в современных браузерах - в основном из-за менеджеров паролей и т.д.

Вы можете попробовать добавить этот autocomplete="new-password", который не полностью поддерживается всеми браузерами, но он работает с некоторыми

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
    </li>
        ...
    </ul> </form>

Ответ 19

<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">

Ну вот.

Ответ 20

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

С помощью jQuery просто добавьте что-то вроде:

$(function() { $('input[type="password"]').val(''); });

Ответ 21

Я думаю, что эта проблема является специфической для браузера (Chrome), поэтому вы можете управлять, добавив условие только для Chrome

@Html.PasswordFor(model => model.Password, new { @autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off") })

@autocomplete = (Request.Browser.Browser.ToLower(). Contains ("chrome")? "new-password": "off")

Ответ 22

Just Found Another Simple Solution и работал у меня во всех трех основных браузерах Chrome Firefox и Opera

<input type="text" onfocus="this.type='email'"/>
<input type="text" onfocus="this.type='password'"/>

Ответ 23

Попробуйте установить autocomplete = "new-password", как показано ниже:

<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password" />