JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action=""><input type="password" id="password" /><input type="submit" /></form>
</body>
</html>

JavaScript

(function ($) {
  $.fn.extend({
    passwordTextSwap : function () {
      this.filter('input:password').each(function () {
        var pw = this,
            attributes = {              // Kötelező attribútumok, és az
              focus: function (event) { // eseménykezelőnk.
                $(pw).show();
                $(this).hide()
                pw.focus();
                event.preventDefault();
              },
              type: 'text',
              value: '',
              id: $.noop(),
              name: $.noop()
            },
            al = pw.attributes.length,
            i = 0,
            attr, ph;
      
        // Lemásoljuk az attributumokat.
        for (; i < al; i += 1) {
          attr = pw.attributes[i];
          // A már létező mezőket és a `name` mezőt nem másoljuk.
          if (!(attr.name in attributes)) {
            attributes[attr.name] = attr.value;
          }
        }
      
        // Ha elhagyjuk a jelszó mezőt, és az üres,
        // akkor visszaállítjuk a szövegmezőt helyette.
        $(pw).hide().blur(function () {
          if (!this.value) {
            ph.show();
            $(this).hide()
          }
        });
      
        // Beszúrjuk a szövegmezőt a jelszó mező elé.
        ph = $('<input>', attributes).insertBefore(this);
      });
      return this;
    }
  });
}(jQuery));
var pass = jQuery('#password').passwordTextSwap().prev('input:text').val('Ahh');