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

Question

I have a predicament where I need a standard text input box to act like a password input without the type=password attribute.

The reason being is the app for a specific reason does not want password managers to be triggered by it.

Basically I was thinking

<script>
var mypw ="";
</script>

<input type="text" onkeydown="updatethis(this)"     onpaste="updatethis(this)">

After this I am lost, but somehow i want the pw to be stored in mypw and the input to just show a security char.

Again the need is very unique but I need to avoid password managers from triggering in this one scenario.

I need it to work in all browsers. Edge and ie don't support. — VinnieS
– VinnieS, Commented May 13, 2016 at 23:55

Alberto Rubio · Accepted Answer · 2016-05-12 05:05:42Z

4

You mean something like?

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

First name:<br>
<input type="text" name="firstname">

answered May 12, 2016 at 5:05

Alberto Rubio

4004 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VinnieS Over a year ago

I need it to work in all browsers. Edge and ie do not support it.

VinnieS · Accepted Answer · 2016-05-14 02:44:08Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related