Question

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

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

是否存在永久版本的占位符？或者有没有办法实现这样的功能？我已经搜索过这个问题并且找到了this link几乎解决了这个问题，但是当输入文本时所有这些占位符都消失了 - 我想要一个占位符的等价物，但是它总是在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

查看第四个输入字段，＆＃39;占位符＆＃39;在您键入内容后隐藏，但您可以在javascript代码中轻松更改它。

然而，你需要写一些能够移动“占位符”的东西。当输入内容时，如果这是你想要的。

是否有可能拥有“永久”占位符？

2 个答案: