在输入字段中粘贴标签，键入时不会更改。 （无占位符）。 HTML/JS/JQuery

Question

请看下面的截图，左边是我目前得到的，右边是我想要实现的不使用任何插件或html5属性

屏幕左侧发生的方式是我有 2 个输入字段，其中 1 个的值为 Username:，另一个被隐藏。当我关注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();
    }
});

Answer 1

http://jsbin.com/emasuj/1/edit

<label>
  Username:
  <input type="text" />    
</label>

CSS：

input{
  border:none;
  background:#eee;
}
label{
  color:#777;
  padding:10px;
  background:#eee;
  border-radius:5px;
}

如果你想改变焦点的背景颜色，这里有一个例子，如何用一点 jQ 来做到这一点：
http://jsbin.com/emasuj/2/edit