是否可以使用“永久”占位符？

Question

我正在一个包含一些文本框的系统上工作，该文本框可测量温度，每分钟的心跳次数等。现在，我只使用一个文本框，并在同一行的文本框后添加单位。

我的问题是空间有限，所以我想在文本框中包括单位信息，例如右对齐。我知道HTML5占位符属性，但这仅适用于空字段，并且在输入数据后消失。我想要的是该单位信息始终可见。

是否存在类似占位符的永久版本？还是有办法实现这种功能？我已经搜索了这个问题，并找到了几乎可以解决问题的链接，但是所有这些占位符在输入文本时都消失了-我想要一个占位符，但始终可见，而在显示时不显示在POST数据中已提交。

Answer 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/

Answer 2

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

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

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

然而，如果您想要的话，您需要编写一些在输入内容时移动“占位符”的内容。