如何防止 IE 将 textarea 换行符转换为单个空格答案

【问题标题】：How to prevent IE from converting textarea newlines to a single space如何防止 IE 将 textarea 换行符转换为单个空格
【发布时间】：2011-12-16 17:02:46
【问题描述】：

我有下面的 HTML 代码，它本质上是复制一个 textarea 框，包括它的文本。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            function copyTextarea() {
                var originalTextbox = document.getElementById('originalTextarea');
                var copiedTextboxSpan = document.getElementById('copiedTextareaSpan');

                var text = originalTextbox.value;

                copiedTextboxSpan.innerHTML = '<textarea name="myNewTextarea" rows="5" cols="50"></textarea>';

                var newTextbox = document.getElementsByName('myNewTextarea')[0];
                newTextbox.innerHTML = text;
            }
        </script>
    </head>
    <body>
        Enter your text:
        <br />
        <textarea id="originalTextarea" rows="5" cols="50"></textarea>
        <br />
        <input type="button" value="Copy Textarea" onclick="copyTextarea()" />
        <br />
        Copied text:
        <br />
        <span id="copiedTextareaSpan"></span>
    </body>
</html>

这是我拥有的一个非常简化的 HTML 版本，所以请不要建议进行大的更改。我需要创建 textarea 框并单独设置其文本等。

这段代码看起来很简单，而且工作正常，除了换行符。出于某种原因，Internet Explorer (IE) 总是将换行符转换为一个空格。更奇怪的是，这不是在我的 Tomcat 服务器本地发生的，而是在我部署到测试服务器时悄悄发生的。但在测试服务器上，它在 Chrome、Firefox 等中运行良好。

有人知道会发生什么吗？我对 JavaScript 不太了解，但我认为执行代码的是浏览器。但如果是这样，为什么IE本地没有问题，而测试服务器有问题？

【问题讨论】：

标签： javascript html internet-explorer newline

【解决方案1】：

尝试创建实际的 DOM 对象：

newTextarea = document.createElement('textarea');
newTextarea.setAttribute('name', 'myNewTextarea');
newTextarea.setAttribute('rows', '5');
newTextarea.setAttribute('cols', '50');

copiedTextboxSpan.appendChild(newTextarea);

var newTextbox = document.getElementsByName('myNewTextarea')[0];
newTextbox.value = text;

此外，在处理文本区域时，请使用 value 而不是 innerHTML。

【讨论】：

不走运。奇怪的是，IE 现在甚至没有复制文本。它在本地工作正常，但在服务器上它有一个 JavaScript 错误，在尝试设置新的 textarea 值时抱怨“未定义”。我设置了一些警报。在服务器上，IE 说getElementsByName 返回一个[object]，而在本地它说它返回一个[object HTMLCollection]。同时，服务器上的 Chrome 说它是[object NodeList]
在这种情况下，我不确定错误是什么。如果您使用的是 jQuery，它可以很好地规范浏览器的不一致性。如果您确实使用它，我可以帮助重写您的代码，因为它实际上是几行代码。
我不懂 jQuery。我试过$('textarea[name=myNewTextarea]').val(text);，但没有显示文本。有什么问题吗？
我没有对原始代码进行任何更改，只是将最后两行替换为 $('textarea[name=myNewTextarea]').val(text);。
我实际上得到了要复制的文本。出于某种原因，jQuery 在我的测试页面上没有被识别，但在我的真实页面上。但是，换行符现在被替换为%0A。 jQuery 是否有一个简单的方法来转义/取消转义？

【解决方案2】：

如果你可以使用 jQuery：

$('#copiedTextareaSpan').replaceWith(function () {
    var text = $('#originalTextarea').val();
    return '<textarea name="myNewTextarea" rows="5" cols="50">' + text + '</textarea>';
});

将文本从originalTextarea 复制到copiedTextArea（在创建之后）。

【讨论】：