I have the following HTML code, which essentially copies a textarea box, including its text.
<!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>
This is a very simplified version of HTML I have, so please don’t suggest huge changes. I need to create the textarea box and set its text separately, etc.
This code seems simple and works fine, except when it comes to newline characters. For some reason, Internet Explorer (IE) always converts newlines into a single space. Stranger still, this was not happening locally on my Tomcat server, but crept up when I deployed to the test server. But on the test server, it is working fine in Chrome, Firefox, etc.
Does anyone know what might be happening? I don’t know too much about JavaScript, but I think it’s the browser that executes the code. But if that is true, why does IE have no problems locally but has a problem on the test server?
Try creating actual DOM objects:
Also, use
valueinstead ofinnerHTMLwhen dealing with a textarea.