是否有可能拥有“永久”占位符？ [英] Is it possible to have a 'permanent' placeholder?

问题描述

我正在研究一个包含一些文本框的系统，这些文本框可以测量温度，心率每分钟跳动等等。现在我只是使用一个文本框并将该单元添加到同一行上的文本框之后。

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

是否存在像永久版本的占位符这样的东西？或者有没有办法实现这样的功能？我搜索了这个问题，并找到此链接，其中几乎解决了这个问题，但所有这些占位符在输入文本时都消失了 - 我希望等同于占位符，但它始终可见，而在提交时不会显示在POST数据中。

解决方案

通过将输入封装在特殊div中，您可以在输入字段上添加一段文本和绝对位置。

  .input-container {position：relative; input-container input {width：100％;}。input-container .unit {position：absolute; width：150px;}。显示：块;顶部：3px; right：-3px;背景颜色：灰色;颜色：#ffffff; padding-left：5px; width：45px;}  

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

$ b

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

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.

解决方案

By wrapping the input inside a special div you can add a block of text and absolute position it above the input field.

.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>

Demo: http://jsfiddle.net/mgmBE/3/

这篇关于是否有可能拥有“永久”占位符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！