如何獲得包裝的多行輸入或textarea？

我試圖實現HTML佈局，看起來完全一樣打印時：如何獲得包裝的多行輸入或textarea？

 
Comments: _____________________________________________ 
_______________________________________________________

...其中有下劃線的部分是某種—的單一輸入標籤意味着它也可能是一個textarea或其他任何東西，只要用戶可以輸入文本並將其打印出來。

的要求：

的「Comments」文本必須在同一行中輸入文本
的第一行中我不能只是把單詞「註釋」一個文本里面。
打印
當我不能使用多個文本輸入
輸入的兩條線應該強調我不能打印前對頁面提交數：我已經完成幾乎所有的客戶端。

原因是我必須從外部公司直觀地重新創建紙質文檔，以便在從瀏覽器打印頁面時完全匹配。這是一個內部的「表格」系統的一部分，該系統會在該公司進行預約。它的設置使得這些表單自動在瀏覽器中調整邊距和標題，所以這不是問題。以我需要的方式獲得這個html格式是。

來源

2009-04-20 Joel Coehoorn

先發制人的答案：使用PDF。 – Shog9 2009-04-20 17:29:21

哎唷，我嘗試了一些方法來做到這一點，然後改變了我的設計。祝你好運。 – bendewey 2009-04-20 17:29:28

@Shog：不幸的是我受限於現有的系統。我知道這很糟糕。 – 2009-04-20 17:32:43

嘗試使用相對定位的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>

您必須稍微設計一下textarea才能得到您想要的效果。

來源

2009-04-20 17:29:33 Kirtan

我相當肯定，這不可能單獨使用HTML和CSS（假設您希望有人能夠在這兩行上輸入文本）。唯一的多行輸入是一個textarea，它必須是一個正方形。

你或許可以用一些javascript欺騙來做到這一點，它有一個TinyMCE風格的編輯框，並使用javascript強制文本「評論：」留在開頭，然後讓它在輸入文本時自動加下劃線，模仿外觀。

來源

2009-04-20 17:32:11

您可能希望有一個單獨的樣式表進行打印，並且當他們去打印時，會丟失textarea並且只是爲顯示的打印設置一切。

需要一些JavaScript來做到這一點，它可以通過改變新頁面上的元素進行打印，但這不會有什麼大不了的。

然後你可以有你想要的格式和一切的位置多個div。

另一個選擇是讓他們點擊打印按鈕，將頁面轉換爲pdf。根據您在服務器端的具體情況，有幾個選項。

來源

2009-04-20 17:36:59

你就不能把背景圖像上有你所需要的文本框（以下簡稱「意見：」和下劃線），然後就做了：

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

的元素？人們可能會出現設置其打印設置不允許背景圖像的問題。我不確定這是否是一個問題。另外，我不確定在IE中是否可以使用文本縮進功能 - 我目前在Mac上，它可以與FF和Safari一起使用。

編輯：它在IE7和IE8中工作。

來源

2009-04-20 18:58:23 KyleFarris

有沒有簡單的方法，但你可以嘗試絕對定位標籤出現在文本的頂部，並給文本字段文本縮進。或者通過JavaScript給它一個默認值。

最簡單的方法需要JavaScript或者CSS「：before」僞選擇器，這兩種方法都不是跨瀏覽器的完美選擇。

來源

2009-04-20 19:10:36

如何獲得包裝的多行輸入或textarea？

回答

相關問題