框内带有标签的文本输入框

Question

我正在尝试将文本输入框的标签放在框内的各种技术。然后标签会在您开始输入时消失，在您开始输入之前尽可能长时间地保留标签。 Basecamp (basecamp.com) 的效果非常好，我想效仿，但不确定他们是如何做到的。

当您单击其中包含标签的文本框时，标签在您开始输入之前不会消失。这相对容易编写脚本，有一个问题：如果您在文本框内单击，您的光标可能会出现在标签文本内的任何位置……在开头、中间、结尾。或者，它甚至可以选择一个或多个字符，而不仅仅是将光标插入某处。

在 Basecamp 网站上，您不能选择任何标签文本。无论您单击何处，光标都会出现在文本框的最左侧（开头）。即使你双击，它也不会选择标签文本。

他们是怎么做到的？ 谢谢。

Answer 1

只需使用上面 cmets 中提到的 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;
}

Answer 2

您是否尝试过使用这样的占位符？

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

编辑：

以 basecamp 的 login page 为例，他们似乎避开了占位符，并使用 CSS 使用 overLabel 类来做到这一点：

<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 一样好。