CODEWITHSUNDEEP
htmlcss
DaveIdito
DaveIdito

Reputation: 1606

CSS to make a text field look like password field

How can I set the CSS for an input field of type text in html to appear as a password field, i.e. the text in the input seems to get replaced with a symbol such as the asterisk ("*") or a dot ("•")?

I have this constraint:

<input name="passwordish" type="text" id="inputPassword" placeholder="Password" >

EDIT: Sorry if this was not clear, but for some snowflakish reasons I can't change the field type!

Upvotes: 7

Views: 9651

Answers (2)

KishanSadhwani
KishanSadhwani

Reputation: 158

You may use this:

actualText = "";
function myFunction() {
  var x = document.getElementById("myText").value;
  var tempText = x.replace(/\*/g,"");
  if(tempText == "")
  {
    actualText = actualText.substr(0, actualText.length - 1);
  }
  else {
    actualText += x.replace(/\*/g,"");
  }
  document.getElementById("myText").value = "";
  for (var i=0;i<x.length;i++)
  {
    document.getElementById("myText").value += "*";
  }
}

Only problem is that you will not be able to use the actuall text.

Update:Added a variable that will store the text too. Use variable actualText to access original text ;) Also about calling this function: you will have to call this function in onkeyup event of input

Upvotes: 1

X3R0
X3R0

Reputation: 6314

Recommended that you change text type to password

<input name="password" type="password" id="inputPassword" placeholder="Password" >

OR this

CSS Tricks

input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }

Update:

Mozilla/FireFox Explination

Try this:

input {
    text-security: circle; /* IE/Safari */
    -moz-text-security: circle; /* FireFox */
    -webkit-text-security: circle; /* Chrome/Safari  */
}

Update:

  • Firefox no more supports the following css:

    • -webkit-text-security

    • -moz-text-security

Tested on Firefox 69.0, Windows 10, 64bit,

Upvotes: 10

Related Questions