是否有可能有一个“永久”占位符？答案

【问题标题】：Is it possible to have a 'permanent' placeholder?是否有可能有一个“永久”占位符？
【发布时间】：2013-06-15 21:43:48
【问题描述】：

我正在开发一个包含一些文本框的系统，这些文本框可以测量温度、每分钟的心率等。现在我只使用一个文本框并在同一行的文本框之后添加单位。

我的问题是空间相当有限，所以如果可能的话，我想在文本框中包含单位信息，比如右对齐。我知道 HTML5 占位符属性，但这仅适用于空字段，一旦输入数据就会消失。我希望该单位信息始终可见。

是否存在类似永久版本的占位符？或者有没有办法实现这样的功能？我已经搜索了这个问题，发现 this link 几乎解决了这个问题，但是当输入文本时所有这些占位符都会消失 - 我想要一个占位符的等价物，但它始终可见，而不显示在 POST 数据中已提交。

【问题讨论】：

这很有趣...为什么不减少文本框的大小呢？
这是可能的，如果我找不到我正在寻找的解决方案，我可能会这样做，但我认为在文本框中让单元变灰并右对齐看起来有点更整洁。
这是您要查找的内容：twitter.github.io/bootstrap/base-css.html#forms 前置和附加输入
@Turcia 差不多，这绝对是一个选择。如果可能的话，我宁愿这个单元在文本框内。
这是你的意思吗？ jsfiddle.net/mgmBE/1

标签： html placeholder

【解决方案1】：

通过将输入包装在一个特殊的 div 中，您可以添加一个文本块并将其绝对定位在输入字段上方。

.input-container {
  position: relative;
  width: 150px;
}

.input-container input {
  width: 100%;
}

.input-container .unit {
  position: absolute;
  display: block;
  top: 3px;
  right: -3px;
  background-color: grey;
  color: #ffffff;
  padding-left: 5px;
  width: 45px;
}

<div class="input-container">
  <input type="text" value="102.95" name="" />
  <span class="unit">Volts</span>
</div>
<div class="input-container">
  <input type="text" value="30" name="" />
  <span class="unit">Kilos</span>
</div>
<div class="input-container">
  <input type="text" value="64" name="" />
  <span class="unit">km/h</span>
</div>

演示：http://jsfiddle.net/mgmBE/3/

【讨论】：

【解决方案2】：

这种可能的解决方案与 html5 占位符无关，但如果您相应地调整代码，它应该可以按照您的意愿工作：

http://attardi.org/labels2/#demo

查看第四个输入字段，一旦您输入内容，“占位符”就会隐藏，但您可以在 javascript 代码中轻松更改它。

但是，如果您愿意的话，您需要编写一些内容来在输入内容时移动“占位符”。

【讨论】：