textarea裏面的着色線

有沒有什麼辦法讓textarea顯示線的顏色？我試圖實現的是每隔一行着色一行，即白色，灰色，白色，灰色，白色，灰色......以提高可讀性。用戶應該寫很多東西，比如「輸入名字，每一行都是新行」。textarea裏面的着色線

我確實使用jQuery，所以如果他們提出了一些簡單的解決方案，這將是完美的。

2009-12-23 Sejanus

你在找什麼叫斑馬條紋，也許這將有助於一些谷歌搜索。但是，我認爲目前沒有辦法在textarea中對文本進行這種操作（除了使用背景圖像黑客）。

CSS3有很多強大的功能，比如n-psuedo類。可能有一種方法可以使用它，但同樣，在文本區域內可能無法做到這一點。

也許另一種解決方案是做一些類似於SO的操作 - 在文本框中輸入文本，然後在文本框旁邊或下方顯示格式良好的版本。你會使用jquery實時解析文本並顯示斑馬條紋。

編輯：我有另一種想法，可能工作，但會採取一些試驗。有可能使用jQuery來獲取文本區域中每行文本的絕對位置。我認爲你至少可以得到textarea左上角的絕對位置，獲得文本的行高，乘以行數（文本中斷行數），測試並稍微調整一下，以及你應該能夠得到文本區域中每一行的位置。然後，使用jquery爲文本區域後面的文本區域繪製一個彩色div，文本區域的寬度與textarea一樣寬，並且與文本行高度相同。 textarea也應該是透明的。

隨着更多的工作，甚至可以讓斑馬條紋邏輯足夠聰明，以檢測文本行是否被包裹，以便斑馬條紋可以是2或更高的線條。

可能工作。祝你好運！

來源

2009-12-23 08:54:17 Tauren

完成此操作的一種方法是在textarea中使用背景。

<style type="text/css"> 
    textarea { background-image: url(bg.png); } 
</style>

話雖這麼說，你必須要玩的瓷磚和行高得到它恰到好處，但它應該是能夠做到你無需使用找什麼的腳本。

來源

2009-12-23 08:40:47

記住用戶可以覆蓋最小字體大小，如果該設置計算textareas它可能會破壞您的解決方案。 – 2009-12-23 08:47:42

好點。不知道是否有解決方案是完全可以證明的。看到其他人提出的答案會很有趣。 – 2009-12-23 09:00:55

如果您想讓實際文字顏色不同，則無法使用純粹的<textarea>進行此操作。您可以使用富文本編輯器，例如TinyMCE，但這在我看來太過於過分。

來源

2009-12-23 08:45:34

textarea裏面的着色線

回答

相關問題