CODEWITHSUNDEEP
htmlpasswords
JAN
JAN

Reputation: 21855

How to present asterisk when entering a password in index.html

Using that code : 

<!-- THIS IS WHERE IT ALL STARTS  -->


<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
      href="./css/styles.css"
      type="text/css"/>
</head>

<body>
<table class="title">
  <tr><th>Web Bank application</th></tr>
</table>

<br/>
<fieldset>
  <legend>Login Page - please enter your Username and Password</legend>
  <form action="loginPage"> 
    Username: <input type="text" name="username"><br>
    Password : <input type="text" name="password"><br>
    <input type="submit" value="Login">
  </form>
</fieldset>

<br/>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/>
</body></html>

The user enters his username and password enter image description here

How can I present to the screen asterisks (*) when I enter the password , e.g. instead of showning myPassword , I want to present ********** , and keep the actual characters of the string myPassword in tact ?

Thanks

Upvotes: 3

Views: 52479

Answers (4)

WEBjuju
WEBjuju

Reputation: 6581

Right, @eric-yin has the correct answer: An input with type="password" masks the password.

Nevertheless, Like @beefchimi, i needed: a password field that can:

  1. Show asterisks in every browser
  2. Show the final character without an asterisk

Better Password Field jQuery Plugin Example

So i wrote this jQuery plugin:

$.fn.betta_pw_fld = function(pwfld_sel, hiddenfld_sel) {

  // this is the form the plugin is called on
  $(this).each(function() {

    // the plugin accepts the css selector of the pw field (pwfld_sel)
    var pwfld = $(this).find(pwfld_sel);

    // on keyup, do the masking visually while filling a field for actual use
    pwfld.off('keyup.betta_pw_fld');
    pwfld.on('keyup.betta_pw_fld', function() {

      // if they haven't typed anything...just stop working
      var pchars = $(this).val();
      if (pchars == '') return;

      // we'll need the hidden characters too (for backspace and form submission)
      var hiddenfld = $(this).parents('form').find(hiddenfld_sel);
      var hchars = hiddenfld.val();

      // use these placeholders to build our password values
      // this one will have all asterisks except the last char
      var newval = '';

      // this one will have the actual pw in it, but we'll hide it
      var newhpw = '';

      // in this block, we're in a "keydown" event...
      // let's get the characters entered
      // loop over them and build newval and newhpw appropriately
      for (i=0; i<pchars.length - 1; i++) {
        if (pchars[i] == '*') {
          newhpw += hchars[i];
        } else {
          newhpw += pchars[i];
        }
        newval += '*';
      }

      // we want to see the last character...
      var lastchar = pchars[pchars.length - 1];
      if (lastchar == '*') {
        newval += hchars[pchars.length - 1];
        newhpw += hchars[pchars.length - 1];
      } else {
        newval += pchars[pchars.length - 1];
        newhpw += pchars[pchars.length - 1];
      }

      // set the updated (masked), visual pw field
      $(this).val(newval);

      // keep the pw hidden and ready for form submission in a hidden input
      hiddenfld.val(newhpw);
    });
  });
};

The html might be:

<form id="myForm">
  <label for="pw">Type password:</label><br>
  <input name="pw" class="stylishPassword" type="text"><br>
  <input class="hiddenPassword" type="hidden">
</form>

And at document.ready, or appropriate time, the plugin is instantiated like this:

$('#myForm').betta_pw_fld('.stylishPassword', '.hiddenPassword')

Visit the Better Password Field jQuery Plugin Codepen and then please remember to vote it up if it helps you.

Upvotes: 2

Borniet
Borniet

Reputation: 3546

When working with passwords, use the input type="password" instead of text. The format is the same, it will just tell the browser that you want your user to enter a password in it, or other sensitive data, that should be hidden from weary eyes. So the browser will not show the typed characters (or just briefly), but will show asterisks instead.

Username: <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>

Upvotes: 2

Jigar Joshi
Jigar Joshi

Reputation: 240870

change it to

<input type="PASSWORD" name="password">

Specifications

Upvotes: 5

Eric Yin
Eric Yin

Reputation: 8973

<input type="password" name="password">

Upvotes: 14

Related Questions