Banner Ad

Monday, June 11, 2018

HTML Attributes : readonly VS disabled

By Francis   Posted at   1:44 PM   No comments

                   Recently, i have encountered a problem, that is i need to “disable” some text boxes after it pre filled it’s data from server. As a normal developer i decided to use the “disabled” property of the text box like below:

 

<input  type="text" id="txtName" disabled />

It works for me. Good! But my requirement expects some more functionalities. That is, whenever the value prefilled in the above text box, after the user clicks the “submit” button which inturn validate the value in client side and fire up the validation messages.

 

Here is what i stumbled! The problem arised! The “disable” property won’t allow you to edit. It will completely lock the control from edit. After that i come to know about the alternate property called “readonly”, which acts nearly like “disable” property, but one small exception you can fire the client side validations without any problem.

 

<input  type="text" id="txtName" readonly />

 

So my learning here is, if you want to lock the control entirely you can go with “disabled” property. If you want to just lock the control and wants to enable the validations means you can go with “readonly”! The above points are opt only for “text boxes” alone!

 

Below list provides a detailed difference between these 2 properties:

 

                  disabled                                     readonly                                     
values not passed while submitting the form values will be passed while submit the form
tabbing navigation not possible allow tabbing navigation.
Unable to get focus. Will get focus
Max. HTML controls support “disabled” property like <select>, <option>  and <button>. Not all form elements have readonly attribute suppor.

 

Hope this helps!

Connect with Us