带框内标签的文本输入框

我正在试验各种将文本输入框的标签置于框内的技巧。然后标签在您开始输入时消失，在您开始输入之前尽可能长时间地将标签留在原地。 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

带框内标签的文本输入框

回答

相关问题