forms:
read-only input boxes

Question: Is there a way to disable an input field, i.e. allow text to be displayed, but not changed ?

Presently, JavaScript does not provide methods for disabling text fields, although this will surely change in the future. For now, use one of the following two kludges:

Kludge #1

The first technique makes it difficult to put keyboard focus in the edit box. If you can't get your cursor there, you certainly can't edit it.

<script>
disabled = true;
</script>
<form>
 <input type=text value="try to edit me"
  onFocus="if (disabled) blur ();">
</form>

Due to buggy JavaScript implementations, however, the success of this technique varies from system to system.

Kludge #2

The second technique is not as nice, but it is more reliable. It allows the box to be edited, but quickly returns it to its original state as soon as focus leaves the box.

<script>
disabled = true;
</script>
<form>
 <input type=text value="try to edit me"
  onChange="if (disabled) form . reset ();">
</form>

One nice feature about Kludge #2 is that it allows the user to select the text and copy it to the clipboard. This is not possible with Kludge #1.

Perhaps the best solution is a combination of the two.

Charlton Rose
30 August 1997