7

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!

DaveIdito
  • 1,546
  • 14
  • 31
  • set type to password – darkhouse Aug 31 '19 at 12:16
  • check this out [link](https://codeburst.io/how-to-display-password-in-a-form-input-9381310c88c6) – Dean Van Greunen Aug 31 '19 at 12:18
  • @DeanVanGreunen I was there. I don't think it answers my question. I can't change the filed type in my HTML – DaveIdito Aug 31 '19 at 12:23
  • @DaveIdito, works even without changing the field type. Check in fiddle. – Code_Ninja Aug 31 '19 at 12:25
  • @Code_Ninja but the Javascript there toggles the type: `document.getElementById('password'); if (password.type === 'password') { password.type = 'text'; } else { password.type = 'password'; } };` which is something I've to avoid. – DaveIdito Aug 31 '19 at 12:30
  • If this toggles the type of the field. The code is still good to go as the CSS will be applied when the type is text. Otherwise, the text is already hidden. So, I dont think that any point of time, any user would be able to see the password. Unless they type `$("#inputPassword").val()` in the console. [Here](https://jsfiddle.net/3onwLev4/) is the fiddle. Check it. Thanks. – Code_Ninja Aug 31 '19 at 12:36

2 Answers2

8

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,

Dean Van Greunen
  • 5,060
  • 2
  • 14
  • 28
1

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

KishanSadhwani
  • 118
  • 1
  • 9