发表新帖
发表新帖

How to disable Chrome's saved password prompt setting through JavaScript

前端 未结
关注
7 1207
耶瑟儿～
耶瑟儿～ 2020-11-28 13:32

Is there any way to manipulate Chrome settings with the help of JavaScript or jQuery? I want to disable the save password pop-up bubble using JavaScript. How to do

相关标签:
7条回答
  • 我寻月下人不归
    2020-11-28 13:51

    I've had success preventing this popup by adding the type="button" attribute to the <button> that is kicking off the event.

    I had understood browsers to accompany the "Do you want to save this login?" popup with any form submit, but I get this popup even when using a button outside a <form>. I am guessing that since a button by default is <button type="submit">, in some way clicking it is recognized as a form submit even if you're not using it in a <form>.

    Tested in recent versions of Firefox, Chrome, Edge.

    0 讨论(0)
  • 无人共我
    2020-11-28 13:57

    Now I am going to give answer on my own question.

    It can be done in both chrome as well as in mozilla fire fox.

    For Chrome

    First of all you must have to remove the attribute "password" of input type.

    The main reason behind this is when you take input type = "text" and input type = "password" major browser shows that pop up. Because browsers have inbuilt functionality to show that pop up when you take input type = "password".

    Now we can manipulate chrome from this.

    Here is an example

    <html>
<head>
   <title> Remove Save Password Pop Up For Chrome </title>
   <style>
       #txtPassword{
           -webkit-text-security:disc;
       }
   </style>
</head>
<body>
   <input type="text" id="txtUserName" />
   <br />
   <input type="text" id="txtPassword" />
   <br />
</body>
</html>

    It is css property that is used for changing text into bullets.

    For Mozilla

    You cannot do this in mozilla. Because -moz-text-security is obsolete. It is not working in mozilla.

    But we can also manipulate mozilla.

    Now there are list of character codes in html that is supported in all of the major browsers.

    From that character code for bullet is '&#8226;'. When you write this code in html it will print bullet like this "•"

    Now we can replace the text field with these bullets

    But there is one limitation for this. You cannot print bullets inside the text box. But there is also solution for that limitation. Because everything is possible in programming world.

    For that limitation we can make fake div that shows bullets when you write password.

    Here is an example.

    <html>
<head>
  <title> Remove Save Password Pop Up For Mozilla </title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
  <script>
      function RemoveSavedPassword() {
         if (jQuery.browser.webkit == undefined) {
             inputValue = $('.real-input').val();
             numChars = inputValue.length;
             showText = "";
        for (i = 0; i < numChars; i++) {
            showText += "&#8226;";
        }
        $('.fake-input').html(showText);
    }
 }
  </script>
</head>
<body>
    <div class="input-box">
       <label>Enter password:</label>
       <div class="fake-input"></div>
       <input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
    </div>
</body>
</html>

    Now there is magic of CSS. Magic means power of margin, padding, opacity and position attribute we can manipulate user.

    Here is the link:

    http://codepen.io/jay191193/pen/bVBPVa

    Security Issue

    For security issue of input type="text" instead of input type="password" you can visit this link:

    Security issue of changing type="password" into type="text"

    0 讨论(0)
  • 日久生厌
    2020-11-28 13:57

    I think I found rough, but working method to prevent browser saving password prompt. It might be not really beautiful solution, but it worked for me.

    Made with jQuery.

    Hope it helps.

    $('#modified span').on('click', function(e){
  e.preventDefault();
  $('#modified').submit();
});


//Clear the form on submit
$('form').on('submit', function(){
  $('form input[type="text"], form input[type="password"]').val('');
});
    #modified input[type="submit"]{
  pointer-events: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form>
  <h1>Browser IS asking to save password</h1>
  
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <input type="submit" value="Submit"/>
</form>

<form id="modified">
  <h1>Browser IS NOT asking to save password</h1>
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <span>
    <input type="submit" value="Submit"/>
  </span>
</form>

    0 讨论(0)
  • 深忆病人
    2020-11-28 14:07

    This method work for me in chrome and mozilla, Using this in my projects:

    <input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">

    Add onfocus="this.removeAttribute('readonly');" in your input type after this it wont remember any saved password.

    0 讨论(0)
  • 南旧
    2020-11-28 14:10

    There isn't a way to change Chrome settings directly from JavaScript, so the following answer will focus on how to prevent that dialog from appearing for a specific HTML form.

    There aren't any great ways to do this as far as I can tell - from what I've read, the HTML5 autocomplete="off" attribute gets ignored in Chrome, so it will prompt to save the password even if you supply the attribute.

    There is a workaround though - if you set the password field to be readonly until it is focused, Chrome will not prompt to save the credentials. Unfortunately there is no good clean solution that I know of, so that's why the solution I am posting is a little hacky.

    Please view the JSFiddle in Chrome and try submitting each form to see the solution in action (you will need to reload the fiddle after you submit each time): https://jsfiddle.net/g0e559yn/2/

    Full Code:

    /* Chrome does not ask to save the password from this form */

<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>

/*Chrome asks to save the password from this form */

<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>
    0 讨论(0)
  • 长发绾君心
    2020-11-28 14:10

    For Chrome and Firefox 2018

    ONLY IF YOU USE AJAX:

    After you check if login and password is ok, clear password input field:

    $.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
   if (data == "auth is ok"){
     // clear password field
     $("#password").val(''); // <-- this will prevent browser to save password
   }
});
    0 讨论(0)
 看不清?
提交回复
热议问题