ラッピングするマルチライン入力またはテキストエリアを取得するにはどうすればよいですか？

Question

私が印刷されたとき、まさにこのようなHTMLでレイアウトを達成しようとしています：

 
Comments: _____________________________________________ 
_______________________________________________________

...下線部は、それはまた、テキストエリア可能性を意味し、いくつかの種類—の単一入力タグでありますユーザーがテキストを入力して印刷することができる限り、他のものを使用することができます。

要件：テキストエリア内の

• が入力テキスト
• の最初の行と同じ行になければなりません「Comments」のテキストは、私はちょうど単語を置くことができない「コメント」。私は
• を印刷するときに入力の両方の行に下線をしなければならない
• 複数のテキスト入力を使用することはできません
• 私は、印刷前のページ提出にカウントすることはできません。私は、ほぼすべてのクライアント側の操作を行い持っています。

なぜなら、ブラウザからページを印刷するときに、外部の会社から紙文書を正確に一致させるためには、紙の文書を視覚的に再作成する必要があるからです。これは私の前身である「フォーム」システムの一部です。設定されているので、これらのフォームは自動的にマージンとヘッダーがブラウザで調整されるので、問題はありません。このhtmlをフォーマットする方法は、がです。

Answer 1

相対的に配置されたdivを使用すると、絶対配置された別のdivとともにテキスト領域が含まれます。

<div id="outer" style="position: relative"> 
    <textarea id="txtArea" style="text-decoration: underline;"></textarea> 
    <div style="position: absolute; left: 5px; top: 5px;">Comments:</div> 
</div> 

あなたが望む効果を得るには、テキストエリアのスタイルを少し変更する必要があります。

Answer 2

これは、HTMLとCSSだけでは不可能だと確信しています（誰かが両方の行にテキストを入力できるようにしたい場合）。唯一の複数行入力はテキストエリアであり、正方形でなければなりません。

TinyMCEスタイルのエディタボックスを使用し、JavaScriptを使用して「コメント：」というテキストを強制的に冒頭に置いてからテキストに自動的に下線を付けるようにすると、外観をエミュレートする。

Answer 3

印刷用に別のスタイルシートを用意しておき、印刷に行くときにテキストエリアをなくして、印刷の表示用にすべての設定をしておきます。

新しいページの要素を変更して印刷することができるJavaScriptが必要ですが、これは大きな問題ではありません。

次に、必要な書式とすべての配置で複数のdivを作成できます。

もう1つの方法は、ページをpdfに変換する印刷ボタンをクリックさせることです。あなたはサーバー側で何を持っているかによっていくつかのオプションがあります。要素に

text-indent:5em; /* or whatever works... */ 

：ちょうど行い、その後、および：（と下線のコメント '）

Answer 4

はない、あなたはちょうどあなたが必要なものを持っているテキストボックスに背景画像を入れることはできますか？背景画像を許可しないように印刷設定を設定する人々には問題があるかもしれません。それが問題なのかどうかはわかりません。また、IEでテキストインデントが動作するかどうかはわかりません - 私は現在Mac上にあり、FFとSafariで動作します。

編集：IE7とIE8で動作します。

Answer 5

簡単な方法はありませんが、ラベルをテキストフィールドの上に表示し、テキストフィールドにテキストインデントを付けることができます。 JavaScriptを使用してデフォルト値を指定することもできます。

最も簡単な方法は、JavaScriptまたは多分CSS "：before"擬似セレクタを必要とします。いずれの方法もブラウザ間で完璧な方法ではありません。