Forum Moderators: open
I wanted to display the contents of a textarea in a new window. I noticed that when the display css property of the textarea was set to display: none, the textarea.value returned nothing (alert says "Warning").
In all other cases, I get the content ...
Is this an expected behavior, or are IE and MOZILLA wrong?
Can't believe that setting css-properties affects the javascript ...
Code below illustrates the problem ...
<EDIT> It is with Opera 7.0 </EDIT>
<html>
<head>
<title></title>
</head>
<body style="height: 100%; margin: 0px; padding: 0px;">
<textarea style="display: none;" rows="0" cols="0" id="__A" name="__A">Test</textarea>
<input type="button" value="test" onclick="alert(document.getElementById('__A').value);"></input>
</body>
</html>
[edited by: Yoeri at 5:38 pm (utc) on Feb. 6, 2003]
Before version 7, Opera did not allow changes to the html layout after it is initially rendered
(opera 7 works like a dream however) so display:none can be problematic.
Edited my post ...
Yoeri, usually (99% of the time) Opera is right, and everyone else is wrong. There are exceptions, but usually there's a workaround ..
If something doesn't work in Opera it's usually wise to try a different solution, but with the same (or better) result .. just as amznVibe suggested :)
Not so with visibility: hidden.
I don't know what the html spec says is supposed to happen, it's probably a grey area. IE keeps it available.
So use visibility and DrDoc's positioning suggestion will take the textarea element out of the flow of the document.
As good as display: none.
Mozilla 1.x does it, even when display is set to none ...
<html>
<head>
<title></title>
</head>
<body style="height: 100%; margin: 0px; padding: 0px;">
<textarea style="display: none;" rows="0" cols="0" id="__A" name="__A">Test</textarea>
<input type="button" value="test" onclick="alert(document.getElementById('__A').innerText);"></input>
</body>
</html>
However, innerHTML works in all three!
I really, really like Opera 7. first version worthy of serious consideration from a developer's standpoint.
But I find their javascript implementation very quirky.
I hope they get it more in line with Moz and IE before anybody starts using Opera in numbers that make any kind of a difference!
(Also, input doesn't get a closing tag. No "</input>".)
Now I'm thinking this is better
<html>
<head>
<title></title>
</head>
<body>
<input type="hidden" id="__A" value="test">
<input type="button" value="test" onclick="alert(document.getElementById('__A').value);">
</body>
</html>
As to the closing input tag, I tried both innerHTML and innerText right beside it and didn't even notice :) Good eye.
Display none does funny things. Today I had occasion to check the behavior of iframes - both with display: none and visibility: hidden. The web server logs showed that on page load, the iframes with style display: none did not load!
However with visibility: hidden, the browser did request the pages specified in the src attribute.
