工作中遇到的一个有关<textarea></textarea>换行的问题

心已赠人 2023-10-11 10:49 18阅读 0赞

问题大致描述如下：

有一个对比的页面，左右各一个大的textarea，分别显示处理前后的配置内容，处理过程就不赘述了，要求两个textarea中可以显示对比过程中不一样的地方，用颜色区分，支持复制对比内容。

由于配置内容的生成和对比都由是后台java生成的，所以我将颜色也随同配置内容一起拼起来了，然后把新旧配置的内容逐行封装到一个数据结构中，然后在jsp页面上分别显示出来。

生成时的逻辑如下：

<%  
    String\[\] textAndColor = \{""\};  
    for (int i = 0; i < beforeText.size(); i++)  
    \{  
        textAndColor = beforeText.get(i).toString().split(";@;");%>

每一行文件内容，都是以“文件内容+;@;分隔标记+颜色”组成，然后通过JavaScript以innerHTML的方式添加进textarea中，由于在textarea中，换行不能是"\\n"，只能是<br/>，所以要拼一个<br/>

这时候出现一个问题，由于要支持任意内容的复制，所以我考虑用clipboardData.getData("Text");这种方式来获取剪贴板中的内容，并对其做处理，将其中的<br/>替换成"\\r\\n"，但是我发现clipboardData.getData("Text");这种方式好像就获取不到那个<br>，这里要说明一下，将文件内容用上述方式拼到textarea中之后，<br/>就变成了<BR>，而clipboardData.getData("Text");的方式获取不到那个<BR>，最后考虑多拼几个&nbsp;在行末尾，在复制的时候找到这几个空格作为标记，来实现复制时的换行，复制的事件绑定在textarea上面，这样，问题得到了一个比较好的解决，但是我觉得这不是一个最好的解决办法，希望遇到过类似问题的朋友能够指点一下。

代码如下：

String.prototype.replaceAll  = function(s1,s2)\{return this.replace(new RegExp(s1,"gm"),s2); \}  
var cKeyCode = "67";

function copyContent() \{  
    if (event.ctrlKey && event.keyCode == cKeyCode) \{  
        var d = clipboardData.getData("Text");  
        d = d.replaceAll(" ", "\\r\\n");  
        alert("复制成功");  
        window.clipboardData.setData('Text', d);  
    \}  
\}

转载于:https://www.cnblogs.com/Cratical/archive/2010/09/02/1815885.html