How to display some asterisks in password field in HTML?

Question

I have defined a password field in my webpage using this code snippet :

<input type="password" ng-model="dataItem.password" class="form-control"
                                   name="password"

                                   placeholder="Enter Password"/>

This password field is appearing blank when user didn't enter anything in the field.

How can I display some asterisks(in focus) in password field even when user doesn't enter any password ?

EDIT : Using the "value" attribute works fine if I remove the ng-model attribute from my code. But obviously removing it is not a choice as the password won't get updated in that case.

From my understanding, I think since "dataItem.password" is null initially, and the "value" attribute is ignored, hence, password field is null. Kindly, provide some input on this.

change your placeholder to asterisk? – slashsharp Jun 05 '16 at 07:28 — slashsharp, Jun 05 '16 at 07:28
@slashsharp : Need those "asterisks" to be in focus. – user122345656 Jun 05 '16 at 07:29 — user122345656, Jun 05 '16 at 07:29

flux · Answer 1 · 2016-06-05T07:47:21.603

The password type input will hide the value by default. When a value is typed it will show the charters as dots/asterisks (depending on client's app).

If you want to use 'asterisks' you can add it as the placeholders or the value itself. using placeholder is the right way to go with if "enter password" added near the input filed as text.

Example:

<p>Enter Password:</p>
    <input type="password" ng-model="dataItem.password" 
    class="form-control" name="password" placeholder="********"/>

by doing something like this you can add a value:

<input type="password" name="password" value="********"/>

In this case, if placeholder is used, it will be overwritten since the value is already entered. plus, it will make the request from the user to edit a given password... which is not recommended.

I tried the same code previously but it didn't worked. – user122345656 Jun 05 '16 at 07:41 — user122345656, Jun 05 '16 at 07:41

score 0 · Answer 2 · answered Jun 05 '16 at 07:30

0

use value attribute.. it's basics i think.. and why you need to add some value in password field? when you have placeholder in place?

answered Jun 05 '16 at 07:30

Taj Khan

579
2
7
22

I need those "asterisks" to be in focus. I tried the value attribute but it didn't worked. – user122345656 Jun 05 '16 at 07:33

score 0 · Answer 3 · answered Jun 05 '16 at 07:40

0

You can have asterisks in value attribute and you can use directives in angularjs to focus!

answered Jun 05 '16 at 07:40

pix1289

514
1
7
24

You need to define a directive. For reference: http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field – pix1289 Jun 05 '16 at 07:50

score 0 · Answer 4 · answered Jun 05 '16 at 07:52

You can define a value. Before you tell me you have already tried it but it didn't work, let me show you what I am thinking about:

<input type="password" ng-model="dataItem.password" class="form-control"
                                   name="password" placeholder="Enter Password" value="        "/>

This will show 8 asterisks. If you trim the value, then it will be an empty string, so that will help you at the validation.

How to display some asterisks in password field in HTML?

4 Answers4