javascript – Removing readonly does not invoke keyboard on iOS Safari

Question:

I made a crutch so that the browser does not automatically insert the password into the password field, since modern browsers ignore autocomplete="off" and other other methods that can be found. So I set the field to readonly and readonly it on focus. Everything works fine, but in iOS (Safari), when focusing, the keyboard does not appear.

How to fix?

 $('.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 />

Did not work:

  • autocomplete=off to <form>
  • autocomplete=off to <form> and <input> at the same time
  • autocomplete=new-password (works in some browsers / versions, not in others)

For now, the only working way is to use fake_password.

Answer:

Try also adding autocomplete="off" to <form> – it should help you and you won't need to write crutches, and remove readonly from input, which is superfluous in this case.

Scroll to Top