READONLY, DISABLED and JavaScript substitutes (was RE: Readonly Textarea)

>On 10-Aug-98 chip etrak wrote:
>> I am trying to create a read only textarea.  The information I have says to
>> use the ReadOnly attribute in the Text area tag.  Something like this I
>> assume <textarea name="whatever" Readonly> this doesn't work.  Any help
>> would be appriciated.

and Nicholas Sydenham replied

>The readonly attribute is not implemented by any browsers...yet.

	But note that recent versions of Lynx support the DISABLED
attribute.  The prinicpal difference is that variables set by DISABLED
elements are not supposed to be sent to the CGI when/if the form is
submitted.

>To achieve the same effect write some javascript for the onenter event of the
>textarea. When the user clicks on the field just focus them on another field,
>or unfocus the mouse.

	I assume you mean ONFOCUS; there is no ONENTER attribute.  The
desired effect can be obtained with

<TEXTAREA ROWS=2 COLS=70 ONFOCUS="this.blur()" NAME="foo"
	ONCHANGE="this.value=this.defaultValue" READONLY>
You can't change me!
<TEXTAREA>

(The READONLY is to cover all bases in anticipation of future
non-JavaScript, HTML4.0-compatible browsers; if the form is not
submitted or the value of foo is not used by the CGI, DISABLED could
be used instead, and give you greater browser support.  The onChange
handler is included as a backup; if onFocus fails, users will be able
to edit the TEXTAREA, but it will revert to its former state once they
step off it.)  The same fix works for INPUT TYPE="text".  There is a
list of JavaScript hacks to simulate the effect of DISABLED (which can
be set on any form element) at
<http://www.irt.org/script/form.htm#302>.  I find that

	ONCLICK="return false"

works for reset and submit buttons,

	ONCLICK="this.checked=this.defaultChecked"

for checkboxes, and

ONCLICK="me=this.form[this.name]; for (rad in me) {me[rad].checked=me[rad].defaultChecked}"

for radio buttons (the loop is necessary because you may have to
re-check the default).  Select ought to be handled by something like

ONCHANGE="us=this.options; for (opt in us) {us[opt].selected=us[opt].defaultSelected}"

but, at least in NS3 and NS4, the Select.options object, which is
supposed to be an array of Option objects, is actually a reference to
the Select object itself!  (To get an idea of how flaky JavaScript
support is in the browser that invented it, look at
<http://www.slack.net/~whelan/jsbroken.html> from a variety of
platforms.)

	If all else fails, the sledgehammer approach of a
"this.form.reset()" event handler should work if you're not doing
anything with the form.  (Supposing it's a documentation of how the
user filled out the form.)

	Oh, and don't forget to add a 

    <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

to the HEAD of your document if you use event handler attributes.

					John T. Whelan
					whelan@iname.com
					http://www.slack.net/~whelan/

Received on Tuesday, 11 August 1998 18:19:55 UTC