6

Сделал костыль, чтобы браузер не вставлял пароль автоматически в поле пароль, так как современные браузеры игнорируют autocomplete="off" и прочие другие способы, которые можно найти. Поэтому я задаю полю аттрибут readonly и при фокусе удаляю его. Всё работает отлично, но вот в iOS (Safari) при focus'е не появляется клавиатура.

Как исправить?

 $('.no_auto_complete').on('focus', function() {
  if(typeof $(this).attr('readonly') === 'undefined') {
   
  } else {
   $(this).removeAttr('readonly');
  }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="password" class="no_auto_complete" autocomplete="off" readonly />

Не сработало:

  • autocomplete=off к <form>
  • autocomplete=off к <form> и к <input> одновременно
  • autocomplete=new-password (в каких-то браузерах/версиях работает, в каких-то нет)

Пока единственным рабочим способом остаётся использовать fake_password.

5
  • 1
    Может быть, проблема в том, что при readonly на iOs некорректно отрабатывает событие фокуса? Вот в этом вопросе stackoverflow.com/questions/35412990/… у ТС-а тоже была проблема с фокусом при аттрибуте readonly. Проблема решилась по событию touchstart.
    – Speller
    28 сен 2020 в 13:18
  • Добавьте пару скрытых полей text,password на страницу, пусть их автозаполняет. Иначе есть подозрения, что когда почините клавиатуру починится и автокомплит)
    – vp_arth
    28 сен 2020 в 13:21
  • @Speller, да, действительно. touchstart это решение проблемы. Оформите, пожалуйста, как ответ.
    – ModaL
    1 окт 2020 в 11:51
  • @ModaL, К сожалению, вопрос с самого начала был как ответ, но модераторы преобразовали его в комментарий почему - то. Но неважно, рад, что помог!
    – Speller
    8 окт 2020 в 12:44
  • @Speller, эхх, жаль. Система автоматически выбрала кого вознаградить, так как не дождался Вас :( Спасибо Вам огромное, очень помогли мне <3
    – ModaL
    11 окт 2020 в 7:24

3 ответа 3

3
+50

Попробуйте так же добавить autocomplete="off" на <form> - должно помочь Вам и не нужно будет писать костыли, и удалитеreadonly с input это лишнее в данном случае.

1
  • К сожалению, не помогло. Браузер всё равно подставляет пароль, игнорируя autocomplete="off". Такой способ с autocomplete="off" к тегу form описан на просторах интернета и он также ни у кого не работает.
    – ModaL
    26 сен 2020 в 22:30
3

проблема старая и "это не косяк, это опция" (с).
попробуйте один из путей для решения:

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

или через CSS:

.your_class::-webkit-credentials-auto-fill-button {
     visibility: hidden;
}
1
  • Первый вариант работает в точности, как и у меня. Пароль не подставляется (как и нужно), но и клавиатура по-прежнему не отображается в iOS при focus'e. Второй вариант ничего не изменил совсем.
    – ModaL
    27 сен 2020 в 23:54
1

Только на сервере придётся разобраться с login=user&password=&password=123456. Ну или можно лишнее поле задисейблить. И вообще, надо уже избавляться от этой любви поганить нормальное браузерное поведение.

label { display: block; margin: .5em 0; }

#repass { display: none; }

@supports (-webkit-text-security: disc) {
  #repass + label { display: none; }
  #repass { display: block; }
  #repass input { -webkit-text-security: disc; }
}
<form>
  <label>Login: <input type="text" name="login" autocomplete="off"></label>
  <label id="repass">Password: <input type="text" name="password" autocomplete="off"></label>
  <label>Password: <input type="password" name="password" autocomplete="off"></label>
  <button type="sbumit">Submit</button>
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.