Как отключить автозаполнение в Safari 7

Я пытаюсь найти способ сделать Safari 7 (проверенный с версией 7.0.2, 7.0.3) уважать атрибуты autocomplete = "off". Независимо от того, что я пытаюсь, он продолжает автозаполнение.

Это проблема для одной из наших страниц администратора, где мы настраиваем новых пользователей. Наши пользователи сохраняют свои собственные имя пользователя/пароль.

Здесь приведена сокращенная версия формы, которую мы используем. Я пробовал переименовать поля в "xxu" и "xxp", но автозаполнение, похоже, читает надпись на ярлыке. Я обманул себя различными ярлыками, но он все равно каким-то образом запускает автозаполнение.

<form novalidate autocomplete="off">
     <div class="control-group">
          <label class="control-label">Username</label>
          <div class="controls">
               <input type="text" name="xxu" autocomplete="off" required="required">
        </div>
     </div>
     <div class="control-group">
          <label class="control-label">Username</label>
          <div class="controls">
               <input type="password" name="xxp" autocomplete="off" required="required">
        </div>
     </div>
</form>

Я нашел эту статью на сайте Apple, которая описывает эту проблему. https://discussions.apple.com/message/25080203#25080203

Кто-нибудь знает о любом другом методе отключения автоматического заполнения формы в Safari 7? (Agh, это то, чего мы ожидаем от IE)

Спасибо за помощь.

Ответ 1

У нас была такая же проблема в последнее время. Кроме того, у нас была проверка AJAX нашей формы на Бларе. По какой-то странной причине это приведет к тому, что сафари снова закроют наше поле ввода электронной почты. Поэтому каждый раз, когда вы заполняете нужное электронное письмо, Safari заполняет электронное письмо, которое оно предпочитает. Невозможно пройти через нашу форму.

Наше решение

был в значительной степени нарушен алгоритм автозаполнения Safaris (и Chromes).

HTML:

<div class="douchebag_safari">
    <input class="js-clear_field" tabindex="-1" name="e-mail" type="email">
    <input class="js-clear_field" tabindex="-1" name="Ecom_User_Password" type="password">
</div>

CSS

.douchebag_safari {
    position: fixed;
    width: 1px;
    left: -50px;
}
.douchebag_safari input {
    width: 1%;
}

JS:

$('#form').on('submit', function () {
    "use strict";
    $('.js-clear_field').attr('disabled', 'disabled');
}

Суть этого:. Мы вводим поля ввода типа email и пароль с именами, которые будут ранжироваться выше (или же?) в алгоритме автозаполнения Safaris и скрывать их вне экрана. OnSubmit, поля будут отключены и поэтому будут исключены из POST на наш сервер.

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

ПРИМЕЧАНИЕ (при условии, что вы заботитесь): Пользователи с отключенным Javascript все равно получат эти поля, включенные в их POST. В зависимости от вашей установки вам нужно будет разрешить эти два поля перейти на ваш сервер, чтобы предотвратить ошибки. Просто убедитесь, что вы ничего не делаете с этими полями по соображениям безопасности!

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

Ответ 2

Я пошел с упрощенным вариантом подхода douchebag_safari, с которым столкнулся @Skurpi. Он только HTML и идет в нижней части моей формы.

<!-- http://stackoverflow.com/questions/22817801/how-to-disable-auto-fill-in-safari-7 -->
<div class="douchebag_safari" style="left: -9999px; position: fixed; width: 1px;">
    <input type="password">
</div>

Ответ 3

Я нашел более быстрый и простой способ избежать автозаполнения формы. Он работает в FF 27, Chrome 36 и Safari 7.0.5 на Mac. Я все еще не тестировал его в других ОС.

Я просто помещаю поддельное поле в качестве первого места в моей форме, не требуя атрибутов метки или идентификатора и имени. Я спрятал его, например, с встроенным стилем и вуаля!

<input type="password" style="display: none">

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

Честно говоря, мне тоже не нравится это решение... Я хотел бы найти совместимое и стандартное решение, но кажется, что autocomplete = "off" больше не работает.

Ответ 4

Имел ту же проблему и пробовал первые два упомянутых решения HTML/CSS.

Они не работали для меня (или Safari 9.0.3:)), поэтому я внедрил такое решение

<div style="overflow: hidden;width: 0px;height: 0px;">
  <input id="password" type="password" name="password" />
</div>

поверх полей ввода фактической формы.

Проверено на Safari, Firefox (44.0.2) и Chrome (48.0.2564.109), запущенном на OS X El Capitan.

Ответ 5

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

Ответ 6

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

<input type="text" name="password" />

Простой, но эффективный.

Ответ 7

Решения, приведенные выше, не помогли мне. После исследования я мог бы оценить, что решение Safari разрешить автозаполнение основывается на следующих факторах:

  • Атрибут "id" ввода содержит "имя"?
  • Атрибут "name" ввода содержит "имя"?
  • Является ли метка ввода именем "name"?

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

$(document).ready(function () {
	$('input').disableAutoFill();
});

Ответ 8

Вы можете попробовать следующее:

Если вы можете использовать JavaScript и jQuery, вы можете разместить это при загрузке html (body onload):

$('#theform input').val('');

Этот вопрос аналогичен этому: Автозаполнение = "off" совместим со всеми современными браузерами?

Существуют браузеры, которые больше не поддерживают autocomplete="off"

Ответ 9

Вы можете использовать этот код javascript:

if (document.getElementsByTagName) {

var inputElements = document.getElementsByTagName("input");

for (i=0; inputElements[i]; i++) {

if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {

inputElements[i].setAttribute("autocomplete","off");

}

}

}

Ответ 10

Я попробовал все, заработал, а затем более поздняя версия Safari снова сломала мой сайт. Я собираюсь попробовать дополнительные поля формы (спасибо Skurpi). Между тем, вот мое новое решение (в PHP)

if(strpos($_SERVER['HTTP_USER_AGENT'],'Safari') !== false)
{
?>
    <div style="background:#ffff66;border:1px solid #ff9900;font-size:1.5em;padding:1em;">
        The Safari browser has a known bug: autocomplete replaces required data in our form with incorrect values. Unfortunately this may prevent you from adding products to the shopping cart. <br /><br />Please try a different browser or go to your browser settings and turn off autocomplete and refresh the page.
    </div>
<?php
}

Если это достаточно для веб-сайтов, возможно, команда Safari получит подсказку и исправит свой браузер, чтобы подчиниться атрибуту autocomplete = "off".