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"
