How to disable Chrome's saved password prompt setting through JavaScript
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 '•'. 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 += "•";
}
$('.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"
Disable browser 'Save Password' functionality
I'm not sure if it'll work in all browsers but you should try setting autocomplete="off" on the form.
<form id="loginForm" action="login.cgi" method="post" autocomplete="off">
The easiest and simplest way to disable Form and Password storage prompts and prevent form data from being cached in session history is to use the autocomplete form element attribute with value "off".
From https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Some minor research shows that this works in IE to but I'll leave no guarantees ;)
@Joseph: If it's a strict requirement to pass XHTML validation with the actual markup (don't know why it would be though) you could theoretically add this attribute with javascript afterwards but then users with js disabled (probably a neglectable amount of your userbase or zero if your site requires js) will still have their passwords saved.
Example with jQuery:
$('#loginForm').attr('autocomplete', 'off');
Prevent Chrome from prompting to save password from input box?
One solution or workaround is to add <input type="password" style="display:none"/>
above the real password input box. Chrome only tries to save the first password it finds and if it's blank it won't throw up the dialog to save it.
How do you disable browser autocomplete on web form field / input tags?
Firefox 30 ignores autocomplete="off"
for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:
- The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
- We are the third browser to implement this change, after IE and Chrome.
According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete
prevents form data from being cached in older browsers.
<input type="text" name="foo" autocomplete="off" />
How can I disable browser save password prompt in all browsers throughout the application?
So here you go!
with help of This Link
window.onload = function() {
init(); }
function init() {
var x = document.getElementsByTagName("input")[0];
var style = window.getComputedStyle(x);
console.log(style);
if (style.webkitTextSecurity) {
// Do nothing
} else {
x.setAttribute("type", "password");
} }
CSS
input {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
Related Topics
How to Get All the Applied Styles of an Element by Just Giving Its Id
Good Reasons Why Not to Use Iframes in Page Content
How to Detect Support for the HTML5 "Download" Attribute
Ckeditor: Class or Id for Editor Body
How to Set the Universal CSS Selector with JavaScript
Cross-Browser Window Resize Event - JavaScript/Jquery
Document.Getelementbyid VS Jquery $()
JavaScript Function to Convert Color Names to Hex Codes
How to Get "Get" Request Parameters in JavaScript
What Is a Text Node, Its Uses? //Document.Createtextnode()
JavaScript Error Null Is Not an Object
Add CSS Styled Marker to Google Maps
Getting the Values of All the CSS Properties of a Selected Element in Selenium
Multiline Typewriter Effect with Two Consistent Words
How to Format a Float in JavaScript
How to Convert a Float Number to a Whole Number in JavaScript