JSFiddle - React, Tailwind, and code Playground

by mach3ss

HTML

<input type="password" id="pswd" name="pswd" />
<input type="text" id="pswd-text" name="pswd-text" style="display:none;" />
<input type="checkbox" id="pswd-toggle" name="pswd-toggle" data-for="pswd" />
<label for="pswd-toggle">パスワードを表示する</label>

JavaScript

$.fn.extend({
    togglePassword : function( config ){
        option = $.extend({
            "postfix" : "-text"
        }, config );
        sync = function(){
            var i = this.type.toUpperCase() === "PASSWORD" ?
                this.id + option.postfix : 
                this.id.replace( option.postfix, "" );
            $( "#" + i ).val( $(this).val() );
        };
        toggle = function(){
            if( this.checked ){
                $.data( this, "pswd" ).hide();
                $.data( this, "text" ).show();
            } else {
                $.data( this, "pswd" ).show();
                $.data( this, "text" ).hide();
            }
        };
        this.each( function(){
            var id, pswd, text, check, handlers;
            id = this.getAttribute( "data-for" );
            pswd = $("#" + id );
            text = $("#" + id + option.postfix );
            check = $(this);
            handlers = { keyup : sync, blur : sync };
            pswd.bind( handlers );
            text.bind( handlers );
            $.data( this, "pswd", pswd );
            $.data( this, "text", text );
            $(this).click( toggle );
            toggle.apply( this );
        });
    }
});

$("#pswd-toggle").togglePassword();