Get Input Type=Text to Look Like Type=Password

Get input type=text to look like type=password

Well as @ThiefMaster suggested

input.pw {
    -webkit-text-security: disc;
}

However, this will work in browsers that are webkit descendants.. Opera, Chrome and Safari, but not much support for the rest, another solution to this is using webfonts.

Use any font editing utility like FontForge to create a font with all the characters to be * ( or any symbol you want ). Then use CSS web fonts to use them as a custom font.

Can I get input type=text to look like input type=password ?

So potentially you could have something set up like this.

Have a hidden input type that simulates the password values

So I guess jquery wise it would be

//everytime the password changes hidden changes with it.
$('#passwordId').change(function() {
 $('#hiddenID').val() = $('#passwordId').val();
});

html:

<input type="password" id="passwordId" />
<input type="hidden" id="hiddenID" />

So this would allow you to validate the hidden input which would be the same value as the password.

How to make input type= tel work as type= password

Update 2020-06-19

If all you're after is better usability for "pin" inputs, I'd now suggest sticking with the inputmode attribute that didn't work for OP in 2016. The browser support is still quite limited, but it's finally working at least on iOS Safari and as a solution it's much simpler and possibly more secure than avoiding input type="password" altoghether.

<input type="password" inputmode="tel" />

Use a text input as a password html JavaScript but not type=password

I ended up changing the color and background to white, then mapped a divider right on top of it and updated in jquery.

                        <input class="noselect" type="text" id="password"
                            placeholder="Click2Mail Password" name="password" value="" onkeyUp="updatePW();"
                            required><div id="pwchar" onclick="$('#password').focus();" style="font-weight: 300;font-size:14px;position:absolute;top:0px;left:0;margin-top:12px;margin-left:38px;z-index:999999999999999999;"></div>

Here is the jquery

function updatePW()
{

    $("#pwchar").html($('#password').val().replace(/./g,"*"));
}

and last the css to make sure you cannot select the text in the box

#password{ -webkit-text-security: disc;background-color:#fff;color:#fff;
 }
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */

}

It's def not the perfect solution, but it works.

Changing the symbols shown in a HTML password field

You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox. As a side note, it's generally not a good idea to change the behaviour of items like this because users have become used to one form of masking, and you will be introducing a different one - if there's no good reason to do this, I'd avoid it.

---

Related Topics