« April 10, 2005 | Main | April 13, 2005 »
Monday, April 11, 2005
HTML/CSS: JavaScript and <textarea> fields
HTML <textarea> form fields are a convenient way for pages with embedded JavaScript calculations to return multiple line text results. For example, my Lunar Perigee and Apogee Calculator uses two <textarea> fields to display the perigee and apogee and new and full Moon tables. The JavaScript program can assemble the text it wishes to display in a string and simply assign it to the value property of the field. The way in which text is wrapped used to be controlled by the nonstandard wrap= attribute originally introduced by Netscape. In HTML 4.01, wrapping is controlled by the Cascading Style Sheet (CSS) "white-space" property, which can be applied to any element (as of CSS 2.1). I had previously used 'wrap="off"' to suppress wrapping of text, and when I made the document XHTML 1.0 compliant, I replaced this with the specification 'style="white-space: nowrap;"', which had the desired effect in Mozilla, Firefox, and Opera. Internet Explorer, however, treats this style in a <textarea> in a rather eccentric manner--it entirely ignores explicit line breaks (whether line feed or carriage return / line feed) in the string and gloms all the lines together into one monster line which appears as the top line in the box. When doing this, it doesn't display a horizontal scroll bar in the box, so unless you happen to click within the line and move the mouse off the right of the box, you'll never know the rest of the content was there. In order to persuade Explorer to honour line breaks in a string assigned to the value property of a <textarea>, you must specify 'style="white-space: pre;"', which specifies pre-formatted text handling as in an HTML <pre> area. Fortunately, this seems to work properly with the other browsers as well.Posted at
17:48
