Issue
I have the following code (cleaned code for clarity):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function updateTextBox()
{
var lstSource = document.getElementById("lstSource");
var details = lstSource[lstSource.selectedIndex].text;
document.getElementById("txtDetails").value = details;
}
</script>
</head>
<body>
<select id="lstSource" onChange="updateTextBox();">
<option value="26">My Text
has a line break!</option>
</select>
<textarea id="txtDetails"></textarea>
</body>
</html>
Now when I click on an item in my select box I'd like to have the line breaks appear in the textarea, however, they simply do not show up. I've checked in the debugger when populating the select control, and the line breaks are definitely there (and they also show up in the tooltip when I use the "title" property with the same text).
When I debug the JavaScript code and look at the actual data contained in the variable details (using charCodeAt), then I can see that there are no line breaks, i.e. between "My Text" and "has a line break" is only a space character (code 32).
Does anyone have an idea whether this can be fixed, or will I have to live with this (in my opinion) buggy behaviour? Maybe I'm missing something...
Thanks in advance
G.
Solution
HTML collapses whitespace, including newline characters.
You could use <br>
elements instead, but they don't work inside <option>
elements. So, I'm afraid what you want to achieve is not possible with HTML...
Answered By - Frédéric Hamidi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.