帶框內標籤的文本輸入框

我正在試驗各種將文本輸入框的標籤置於框內的技巧。然後標籤在您開始輸入時消失，在您開始輸入之前儘可能長時間地將標籤留在原地。 Basecamp（basecamp.com）有一個非常好的效果，我想模仿，但不知道他們是如何做的。帶框內標籤的文本輸入框

當您單擊其中有標籤的文本框時，標籤在您開始輸入之前不會消失。這對腳本來說相對容易一點：只要在文本框內單擊，光標就可以出現在標籤文本中的任意位置......在開頭，中間和結尾處。或者，它甚至可以選擇一個或多個字符，而不是將光標插入某處。

在Basecamp站點上，您不能選擇任何標籤文本。無論您點擊哪裏，光標都會顯示在文本框的最左端（開始處）。即使您雙擊，也不會選擇標籤文本。

他們是怎麼做到的？謝謝。

來源

2014-08-29 BB Design

爲什麼不使用'placeholder'屬性？如果您需要舊版瀏覽器的墊片，則可以使用庫。 – Barmar 2014-08-29 12:06:39

他們可能使用佔位符或絕對定位的標籤頂部的文本框與一些JavaScript掛鉤它。要禁用選擇，請使用CSS user-select屬性。 – ascx 2014-08-29 12:07:40

只需使用上述註釋中提到的placeholder屬性即可。一個很好的回落是https://github.com/mathiasbynens/jquery-placeholder

另外，如果你想在風格現代瀏覽器的佔位符，你可以使用以下命令：

::-webkit-input-placeholder { 
    color: white; /* or any colour you like */ 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: white; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: white; 
} 

:-ms-input-placeholder { 
    color: white; 
}

來源

2014-08-29 12:09:55 DavidT

謝謝。我只關心最近瀏覽器對佔位符的支持，但是你提到的插件看起來不錯。 – 2014-08-29 13:44:45

您是否嘗試過使用這樣的佔位符？

<input type="text" id="exampleInput" placeholder="Enter some text">

編輯：

望着大本營的login page例如他們似乎避免了佔位符，並且使用一個類overLabel與CSS做的：

<label for="username" class="overlabel" style="">Username or email</label> 
<input autocapitalize="off" autocomplete="on" autocorrect="off" class="overlayable" id="username" name="username" title="Username or email" type="text"> 

body.login div.login_dialog span.overlay_wrapper label.overlabel { 
    position: absolute; 
    top: -2px; 
    left: 6px; 
    z-index: 1; 
    color: #999 !important; 
    font-size: 18px; 
}

佔位符的作品一樣好IMO 。

來源

2014-08-29 12:10:03

感謝您檢查。有趣的是Basecamp如何做，我同意我不確定爲什麼。 – 2014-08-29 13:44:14

在某處必定有瘋狂的方法。運行Basecamp的@dhh也在rails上創建了ruby，所以他們當然知道他們在那裏做了什麼。 ;-) – 2014-08-29 13:46:25

帶框內標籤的文本輸入框

回答

相關問題