javascript - 入力時に変更されない入力フィールド内にラベルを貼り付けます。(プレースホルダなし)。HTML/JS/JQuery

Question

以下のスクリーンショットをご覧ください。左側は現在取得しているもので、右側はプラグインや html5 属性を使用せずに達成したいものです

画面の左側が発生する方法は、2 つの入力フィールドがあり、そのうちの 1 つに値がUsername:あり、もう 1 つが非表示になっていることです。入力フィールドにフォーカスUsername:すると、そのフィールドが非表示になり、新しいフィールドが表示されます。ぼかしイベントでは、その逆が発生します。

JS コード:

$(document).on('focus', '#login .placeholder', function() {
    var inEl = $('#user_name');
    if (inEl && ! inEl.is(':visible')) {
       $(this).hide();
       inEl.show().focus();
    }
});

$(document).on('blur', '#user_name', function() {
    if ($(this).val().length <= 0) {
        var placeHolderElement = $('#login .placeholder');
        placeHolderElement.show();
        $(this).hide();
    }
});