CODEWITHSUNDEEP
htmlplaceholder
Roy
Roy

Reputation: 745

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.

Upvotes: 8

Views: 18505

Answers (2)

Gilly
Gilly

Reputation: 9692

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/

Upvotes: 13

bob
bob

Reputation: 1099

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.

Upvotes: 2

Related Questions