JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<br />
  Password: <input type="text" id="txtPlainPassword" value="Enter Password" class="greyText" />
  <input type="password" id="txtPassword" />
  <input type="button" id="btnSubmit" value="Submit"/>

CSS

.greyText{
  color: #CCCCCC;

JavaScript

$(document).ready(function(){
      $("#txtPlainPassword").show();
      $("#txtPassword").hide();
      $("#txtPlainPassword").focus(function() {
        $(this).hide();  
        $("#txtPassword").show();
        $("#txtPassword").focus();  
      });
     
     $("#txtPassword").blur(function() {
       
        if($(this).val().length == 0)
        {
          $(this).hide();  
          $("#txtPlainPassword").show();
        }      
      });
     
     $("#btnSubmit").click(function() {
          if($("#txtPassword").val().length == 0)
          {
            alert('Please enter password.');
          }
         else
         {
           alert('You password is: ' + $("#txtPassword").val());
       }
       return false;
     });
   });