Read-Only Object

Make the text box read-only.

Read Only

Here's the code:

<h3>Read-Only Object</h3>

<form name="myform">
Make the text box read-only.<br><br>
<input type="radio" name="ro" value="no" onclick="makeItReadOnly=true; document.myform.firstname.value='Lee'"> Read Only
<input type="radio" name="ro" value="yes" onclick="makeItReadOnly=false"> Read/Write

Name <input type="text" name="firstname" value="Lee" onfocus="if (makeItReadOnly) this.blur()">

The javascript part simply sets a variable.

The two radio buttons sets that same variable, makeItReadOnly, True or False. And in the first radio button, the text box's value is reset to a predetermined value.

In the text box, there is a single line javascript. What happens is when the variable makeItReadOnly is set to True, read-only, then the text box loses focus, and it loses focus everytime you try to click on it. This would be this.blur().