7

温度、心拍数などを測定するテキストボックスを含むシステムに取り組んでいます。現在、テキストボックスを使用して、同じ行のテキストボックスの後に単位を追加しています。

私の問題はスペースがかなり限られているため、可能であればテキストボックス内にユニット情報を含めたいと思います。HTML5 プレースホルダー属性については知っていますが、これは空のフィールドにのみ適用されることを意図しており、データが入力されると消えます。私が望むのは、そのユニット情報が常に表示されることです。

恒久的なプレースホルダーのようなものは存在しますか? または、そのような機能を実装する方法はありますか? 私はこの問題を検索し、問題をほぼ解決するこのリンクを見つけましたが、テキストが入力されるとこれらのプレースホルダーはすべて消えます - プレースホルダーと同等のものが欲しいのですが、POST データに表示されないときに常に表示されます。提出されます。

4

2 に答える 2

9

入力を特別な 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/

于 2013-06-19T12:00:14.887 に答える
2

この考えられる解決策は、html5 プレースホルダーとは何の関係もありませんが、それに応じてコードを調整すると、希望どおりに動作するはずです。

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

4 番目の入力フィールドを見てください。何かを入力すると「プレースホルダー」は非表示になりますが、これは JavaScript コードで簡単に変更できます。

ただし、それが必要な場合は、何かが入力されたときに「プレースホルダー」を移動するものを記述する必要があります。

于 2013-06-19T11:38:12.047 に答える