При удалении readonly не вызывается клавиатура на iOS Safari

Question

Сделал костыль, чтобы браузер не вставлял пароль автоматически в поле пароль, так как современные браузеры игнорируют 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.

Answer 1

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

Answer 2

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

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

или через CSS:

.your_class::-webkit-credentials-auto-fill-button {
     visibility: hidden;
}

Answer 3

Только на сервере придётся разобраться с 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>

БЛОГ НА HUSL

При удалении readonly не вызывается клавиатура на iOS Safari

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

Ответы (3 шт):