Fatal编程技术网
  • javascript/
  • Javascript 如何防止IE将textarea换行符转换为单个空格

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

javascript html internet-explorer

Javascript 如何防止IE将textarea换行符转换为单个空格,javascript,html,internet-explorer,newline,Javascript,Html,Internet Explorer,Newline,我有下面的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="tex

我有下面的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>


测试页
函数copyTextarea（）{
var originalTextbox=document.getElementById（'originalTextarea'）；
var copiedTextboxSpan=document.getElementById（'copiedTextareaSpan'）；
var text=originalTextbox.value；
copiedTextboxSpan.innerHTML=''；
var newTextbox=document.getElementsByName（'myNewTextarea'）[0]；
newTextbox.innerHTML=文本；
}
输入您的文本：






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

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

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

尝试创建实际的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
。

如果您可以使用jQuery：

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

$（'copiedTextareaSpan'）。替换为（函数（）{
var text=$（'#originalTextarea'）.val（）；
返回“”+文本+“”；
});
将文本从
originalTextarea
复制到
copiedTextArea
（创建后）。

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