Question

我正在尝试各种将文本输入框的标签放在框内的技巧。然后标签在您开始输入时消失，在开始输入之前尽可能长时间地保留标签。 Basecamp（basecamp.com）有一个非常好的效果，我想模仿，但不知道他们是怎么做的。

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

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

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

Answer 1

只需使用上述评论中提到的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">

编辑：

以大家的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一样。

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

2 个答案: