顯示在文本區域

換行符之間的分離我想有一個HTML5 <textarea>標籤的視覺表示指示何時有相對於包裝「硬」換行。例如，給定的文本：顯示在文本區域

 
    Hello, world\n 
    How are you, and this text 
    wraps to a new line because 
    it's too long.\n 
    But this is a proper new line.

我想有諸如白色空間由換行分隔的線的一些視覺指示：

 
    Hello world 

    How are you, and this text 
    wraps to a new line because 
    it's too long. 

    But this is a proper new line.

插入以代替視覺字符或文本串換行如¶的，也可以工作即

 
    Hello world¶ 
    How are you, and this text 
    wraps to a new line because 
    it's too long.¶ 
    But this is a proper new line.

理想情況下，我想能夠用CSS來做到這一點，但我不知道有什麼合適的（如果存在的話）機制及m將用於這樣的視覺表示。

我寧願不必修改textarea的內容，如果可能的話。

我也寧願用「純」 textarea標籤的工作（而不是如TinyMCE的）。

感謝您的閱讀，任何想法和建議，將不勝感激。

來源

2011-03-23 Brian M. Hunt

您施加了可能使其無法通過的限制，但問題很好。 – 2011-03-23 17:17:46

Live Demo

<style type="text/css"> 
#myform textarea { 
    border: 1px solid #000; 
    position: absolute; 
} 
#myform #source { 
    background: transparent; 
    z-index: 1; 
} 
#myform #mirror { 
    color: rgba(0,0,0,0.5); 
    z-index: -1; 
} 
</style> 

<script type="text/javascript"> 
$("#source").keyup(function() { 
    $("#mirror").val($("#source").val().replace(/\n/g,"¶\n")); 
}); 
</script> 

<form id="myform"> 
    <textarea id="source" rows="10" cols="40"></textarea> 
    <textarea id="mirror" rows="10" cols="40"></textarea> 
</form>

注：測試只火狐3.6.x的。（IE需要一些不透明的CSS）

來源

2011-03-23 18:41:31 drudge

我喜歡這個選項 - v。cool選項;謝謝！ :) – 2011-03-23 21:57:04

「T1」是textarea的ID。使用jQuery：

var content = $('#T1').html().replace(/¶/g,"") //get rid of existing indicator 
content = $('#T1').html().replace(/\n/g,"¶\n") //add indicator 
$('#T1').html(content)

如果不修改textarea的內容，則不能這樣做。你看不到你網頁中沒有的東西。您需要在保存之前去掉段落字符。將代碼連接到onkeyup事件。

來源

2011-03-23 17:40:18

顯示在文本區域

回答

相關問題