显示在文本区域

换行符之间的分离我想有一个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

显示在文本区域

回答

相关问题