CODEWITHSUNDEEP
htmlunicodecross-browsercross-platform
Claudiu
Claudiu

Reputation: 229281

Get or set <input type="password"> masking character

Is there any cross-browser way of getting what the password masking character is in <input type="password"> fields, or, barring that, to set it?

For example, Chrome & Firefox & Safari on OSX use •, while Safari on iOS 7 uses ●. Perhaps other browsers might use the old-fashioned * - I don't know.

Upvotes: 3

Views: 11639

Answers (2)

Mark Dibeh
Mark Dibeh

Reputation: 459

this is a full implementation with styling and handling . i hope you like it :)

function showHidePassword(passSelector, textSelector) {
    if ($(passSelector).hasClass("hidden")) {
        $(passSelector).val($(textSelector).val());
        $(textSelector).addClass("hidden");
        $(passSelector).toggleClass("hidden");
    }
    else {
        $(textSelector).val($(passSelector).val());
        $(passSelector).addClass("hidden");
        $(textSelector).toggleClass("hidden");
    }
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='card'>
<div class='card-body'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>
<i class='fa fa-key'></i>
</span>
</div>
<input type='password' id='password' class='form-control'/>
<input type='text' class='form-control hidden' id='passwordContent' disabled/>
<div class='input-group-append'><span class='input-group-text' onclick='showHidePassword("#password","#passwordContent")'><i class='fa fa-eye'></i></span></div>
</div>
</div>
</div>

Upvotes: 0

na-98
na-98

Reputation: 889

It seems like this was asked previously as well. Check out change password char in HTML which states it can't be done.

Quick search shows that it can be done via JS by faking it and can't be done on a regular password field since it's defined by the browser. Refer to http://www.htmlforums.com/showpost.php?p=655392&postcount=4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
   var k=0;
   var df;
window.onload=function() {
   df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
   k++;
for(c=0;c<df[1].value.length;c++) {
   df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
   }
  }
 }
</script>

</head>
<body>

<noscript>
<div>
Without javascript enabled you will be unable to login
</div>
</noscript>

<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>

</body>
</html>

Upvotes: 0

Related Questions