JSFiddle - React, Tailwind, and code Playground

by ashfame

HTML

<input name="login[username]" value="Your email address" id="email" type="text" />

<input name="login[password]" type="password" id="pass" />

<input name="login[passwordfake]" class="hide-by-default" type="text" value="Your password" id="passfake" />

CSS

.hide-by-default{
    display:none;   
}

JavaScript

(function($) {
    $(document).ready(function() {

        $('#passfake').show();
        $('#pass').hide();

        $('#email').focus(function() {
            if ($(this).val() == this.defaultValue) $(this).val('');
        });
        $('#email').blur(function() {
            if ($(this).val() == '') $(this).val(this.defaultValue);
        });

        $('#passfake').focus(function() {
            if ($(this).val() == this.defaultValue) {
                $('#passfake').hide();
                $('#pass').show().focus();
            }
        });
        $('#pass').blur(function() {
            if ($(this).val() == '') {
                $('#passfake').show();
                $('#pass').hide();
            }
        });

    });
})(jQuery);