0

When a user click on password field, the saved passwords are listed under the field as follows. Is there any possible work around to hide this list ?

enter image description here

Note: I tried various method like setting input field property autocomplete="new-password" and adding a fakepassword field. But still no luck. :(

Shamique
  • 86
  • 8
  • Can be a duplicate of https://stackoverflow.com/questions/32775342/how-to-disable-chromes-saved-password-prompt-setting-through-javascript – Alexis Jan 23 '19 at 08:12
  • 1
    I'm not sure if there is a way. There might be but the core of the problem is that the suggestions are not in any way part of core JS for the browser. It's actually a browser feature *designed* to work with password fields. Any workaround would be essentially trying to trick the browser into not recognising the password field. And as such, any such trick would be a potential security or otherwise problem. And would be inherently unreliable, as a new version of the browser could just recognise the field correctly. Finally, I don't think you should ever *need* to remove that. – VLAZ Jan 23 '19 at 08:14
  • @Alexis No that's not the answer I am looking for. That issue is related to preventing user from saving the password. – Shamique Jan 23 '19 at 08:16

1 Answers1

0

I figured out a work around for this issue and that is password masking using JQuery.

Hint: password suggestion and form filling will only happen if the type of input box is a password.

So the solution I approach is as follow,

01). Make the input field type=“text”

<input type="text" />

02). Mask the input characters with ‘•’

var actualPassword = [],
    temperoryPassword,
    currentCursorPosition = 0,
    passwordChar = '•';

$("#password-text").bind("input", function () {
  temperoryPassword = $(this).val();
  var passwordLength = temperoryPassword.length;

  for (var i = 0; i < passwordLength; i++) {
    if (temperoryPassword[i] != passwordChar) {
      actualPassword[i] = temperoryPassword[i];
    }
  }
  
  // Get current cursor position.
  currentCursorPosition = this.selectionStart;
  $(this).val(temperoryPassword.replace(/./g, passwordChar));
});

$("#password-text").bind("keyup", function () {
  var passwordLength = $(this).val().length;

  if (passwordLength < actualPassword.length) {

    var difference = actualPassword.length - passwordLength,
  key = event.keyCode || event.charCode;

    // Check if last keypress was backspace or delete
    if (key == 8 || key == 46) {
      actualPassword.splice(currentCursorPosition, difference);
    }
    // User highlighted and overwrite part of the password
    else {
      actualPassword.splice(currentCursorPosition - 1, difference + 1);
      actualPassword.splice(currentCursorPosition - 1, 0, temperoryPassword[currentCursorPosition - 1]);
    }
  }
});

$("#btnSubmit").click(function(){
    $("#passwordTxt").text(bindactualPassword(actualPassword));
});

// disable password cut, copy and paste function in password field 
 $('#password-text').bind("cut copy paste",function(e) {
     e.preventDefault();
 });

function bindactualPassword(){
   return actualPassword.join(""); 
}

I written a medium article on this case. You can read it here as well,

https://medium.com/@shamique/programatically-prevent-password-suggestion-and-auto-fill-in-browsers-6661537a3e46

Hope this will useful to others :)

Shamique
  • 86
  • 8
  • Apart from moving your answer here, I have 3 suggestions: 1. In your code, you're using both * and •. You should only use • because otherwise it doesn't work. 2. When cutting (Ctrl+X) part of the text, your Javascript code starts working in strange ways. You could disable the ability to cut text because it normally is also disabled on type="password" inputs: https://stackoverflow.com/questions/24424214/disable-copy-or-paste-action-for-text-box. 3. When inserting text in the middle of a password, the code replaces whichever character was there instead of inserting it in `actualpassword`. – Adrià Vilanova Feb 01 '19 at 18:29
  • @AdriàVilanova Thanks man for pointing out the issues. With regard to the changes, 01). Actually my gist was not updated properly. Now it's updated. 02) & 03). I'll check that function. Didn't came across such situation. Thanks again for your feedback. – Shamique Feb 03 '19 at 06:55