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

46,022

Solution 1

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

Solution 2

change it to

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

Specifications

Solution 3

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>

Solution 4

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.

Share:
46,022

Related videos on Youtube

JAN
Author by

JAN

The biggest C# and JAVA enthusiastic ever existed.

Updated on February 28, 2020

Comments

  • JAN
    JAN about 4 years

    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

  • beefchimi
    beefchimi over 9 years
    At least in Chrome, I get a 'bullet' instead of an 'asterisk'. Any way to change what character is used to obscure the entered value?