css/javascript form onfocus佔位符文字仍然存在，打字消失

Question

我只是想弄清楚如何製作一個像www.tumblr.com這樣的表格。 onFocus佔位符保留在輸入框中，但是當輸入開始時，佔位符文本消失。我知道如何通過發現here的另一個教程來實現onFocus，但我想知道他們如何在onFocus上保留背景文字，但只能在打字時更改。

Answer 1

他們沒有使用onFocus技巧來更改文本。事實上，它們將兩個絕對定位的塊單元分層放置在單獨的相對定位的塊單元中。

然後，他們等待onKeyUp或類似的事件，並隱藏「標籤」元素。

如果您在Firefox中使用Firebug，查看創建效果的節點和CSS是微不足道的。它看起來是這樣的：

HTML

<div class="input_wrapper"> 
    <label for="user_email">Email</label> 
    <input type="text" id="user_email" name="user_email" /> 
</div> 

CSS

.input_wrapper { 
    position: relative; 
} 
.input_wrapper label { 
    position: absolute; 
    top: 2px; 
    left: 5px; 
    z-index: 1; /* stack below input */ 
} 
.input_wrapper_focused label { 
    /* style label for focused input */ 
} 
.input_wrapper_notempty label { 
    visibility: hidden; 
} 
.input_wrapper input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; /* stack above input */ 
} 

你需要的風格和調整這些元素，使它們看起來很漂亮。另外，請注意，它們足夠聰明，可以首先放置標籤 - 這樣屏幕閱讀器仍然可以按照正確的順序查看內容。

然後你需要添加JS到變化和使用keyUp輸入字段，這取決於你的JavaScript庫或非庫決定添加和刪除input_wrapper_focus/notempty類。