Is it possible to have a 'permanent' placeholder?

I am working on a system which includes some textboxes which measure things like temperature, heart rates beats per minute etc. Right now I just use a textbox and add the unit after the textbox on the same line.

My issue is space is rather limited so I would like to include the unit info within the textbox if possible, say right-aligned. I know about the HTML5 placeholder attribute but this is only meant to be applicable to empty fields and disappears once data is entered. What I would like is for that unit info to always be visible.

Does something like a permanent version of placeholder exist? Or is there a way such a feature could be implemented? I've searched for this issue and have found this link which almost solves the issue but all these placeholders disappear when text is entered - I want the equivalent of a placeholder but have it always be visible while not showing up in the POST data when it is submitted.

---

通过将输入封装在特殊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>

---

This possible solution has nothing to do with the html5 placeholder but if you adapt the code accordingly it should work how you want it to:

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

Look at the fourth input field, the 'placeholder' is hidden once you type something, but you can easily change that in the javascript code.

You would however need to write something that moves the 'placeholder' when something is typed in, if that's what you want.

链接地址: http://www.djcxy.com/p/70574.html

上一篇: 占位符和IE！= BFFs（占位符和IE9不工作）

下一篇: 是否有可能拥有“永久”占位符？