2013-06-19 2 views
3

Я работаю над системой, которая содержит некоторые текстовые поля, которые измеряют такие вещи, как температура, частота сердечных сокращений в минуту и ​​т. Д. Сейчас я просто использую текстовое поле и добавляю блок после текстового поля в той же строке.Возможно ли иметь «постоянный» заполнитель?

Моя проблема ограничена пространством, поэтому я хотел бы включить информацию об устройстве в текстовое поле, если возможно, скажем выравнивание по правому краю. Я знаю об атрибуте placeholder HTML5, но это означает, что он применим только к пустым полям и исчезает после ввода данных. Я бы хотел, чтобы информация об устройстве всегда была видимой.

Существует ли что-то вроде постоянной версии заполнитель? Или можно ли реализовать такую ​​функцию? Я искал эту проблему и нашел this link, который почти решает проблему, но все эти заполнители исчезают при вводе текста - я хочу эквивалент заполнителя, но всегда его вижу, пока он не отображается в данных POST, когда он Отправлено.

+2

Это интересно ... почему бы не уменьшить размер текстового поля, а? – AlvinArulselvan

+0

Это возможно, и если я не смогу найти решение, которое я ищу, я, вероятно, сделаю именно это, но я думаю, что наличие серого цвета и выравнивание по правому краю в текстовом поле выглядит немного более аккуратным. – Roy

+1

- это то, что вы ищете: http://twitter.github.io/bootstrap/base-css.html#forms Приоритетные и добавленные входы – Turcia

ответ

2

Это возможное решение не имеет ничего общего с html5 заполнителем, но если вы адаптировать код, соответственно, он должен работать, как вы хотите, чтобы:

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

Посмотрите на четвертом поле ввода, тот «заполнителя 'скрывается, как только вы вводите что-то, но вы можете легко изменить это в коде javascript.

Вам нужно было бы написать что-то, что перемещает «placeholder», когда что-то вводится, если это то, что вы хотите.

4

Обернув ввод внутри специального div, вы можете добавить блок текста и абсолютное положение над полем ввода.

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

.input-container { 
    position: relative; 
    width: 150px; 
} 
.input-container input { 
    width: 100%; 
} 

CSS:

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

Демо: http://jsfiddle.net/mgmBE/3/

Смежные вопросы