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

Question

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

Answer 1

Попробуйте добавить

readonly onfocus = "this.removeAttribute ('readonly');"

в дополнение к

autocomplete = "off"

к входным данным, которые вы не хотите запоминать данные формы (username, password и т. Д.), Как показано ниже:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Обновление: Вот полный пример ниже, основанный на этом подходе, который предотвращает перетаскивание , копирование , вставка и т. Д.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Протестировано на последних версиях основных браузеров, т. Е. Google Chrome, Mozilla Firefox, Microsoft Edge и т. Д. И работает без каких-либо проблем. Надеюсь, это поможет ...

Answer 2

Добавление

autocomplete="off"

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

Проверено на:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• Chrome

Answer 3

Добавление autocomplete="off" не приведет к сокращению.

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

Answer 4

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

Answer 5

Чтобы избежать недопустимого XHTML, вы можете установить этот атрибут, используя javascript. Пример использования jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Проблема в том, что пользователи без javascript получат функцию автозаполнения.

Answer 6

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

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Надеюсь, это кому-нибудь пригодится!

Answer 7

попробуйте это тоже, если просто autocomplete="off" не работает:

autocorrect="off" autocapitalize="off" autocomplete="off"

Answer 8

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

Вот мое исправление. Подход, который я реализовал в моей структуре. Все элементы автозаполнения генерируются со скрытым вводом, подобным этому:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Затем сервер обрабатывает переменные записи следующим образом:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Доступ к значению возможен как обычно

var_dump($_POST['username']);

И браузер не сможет предлагать информацию из предыдущего запроса или от предыдущих пользователей.

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

Answer 9

Итак, вот оно:

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

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

Answer 10

Ни один из хаков, упомянутых здесь, не работал для меня в Chrome. Здесь обсуждается вопрос: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Добавление этого внутри <form> работает (по крайней мере, на данный момент):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>