在輸入欄中粘貼標籤，輸入時不會更改。 （沒有佔位符）。 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