在输入字段中粘贴标签，键入时不会更改。 （没有占位符）。 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;
}

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