The properties of input in HTML readonly and disabled let many users feel that is the same, I would like to introduce the readonly and disabled differences, there is a need to understand the friends can refer.
First look at the attribute definition of input:
Attribute Value Description
Disabled disabled disables this element when the INPUT element is first loaded, so that the user cannot write text in it, or select it.
Note: cannot be used with type= "hidden".
ReadOnly ReadOnly indicates that the value of this field cannot be modified.
Note: Can only be used with type= "text".
In addition, I look at the two differences, first look at the code:
ReadOnly Code: <input type= "text" name= "readonly" readonly= "ReadOnly"/>
ReadOnly is not editable, can be copied, selectable, can receive focus but cannot be modified, the background will receive the value.
Disabled code: <input type= "text" name= "disabled" disabled= "disabled"/>
Disabled cannot be edited, cannot be copied, cannot be selected, cannot receive the focus, and the background will not receive the pass value
We often after the user press the Submit button, use JavaScript to disabled the Submit button, this can prevent the network condition is poor environment, the user repeated point submit button causes data to be stored in the database redundancy.
Disabled and ReadOnly These two properties have something in common, such as all set to true, the form property will not be edited, often in the writing JS code easily mixed with these two properties, in fact, there is a certain difference between them.
If the disabled of an entry is set to True, the form entry cannot get the focus, all the user's actions (mouse clicks and keyboard input, and so on) are not valid for that entry, and most importantly, when the form is submitted, the form entry will not be submitted.
And ReadOnly is just an entry for text input that can be entered into text, and if set to true, the user simply cannot edit the corresponding text, but the focus can still be focused, and when the form is submitted, the entry is submitted as a form.
| The code is as follows | Copy Code |
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>untitled document</title> <body> <form id= "Form1" Name= "Form1" method= "Get" action= "" > <input name= "Q1" type= "text" id= "Q1" value= "readonly" readonly= "true"/> <input name= "Q2" type= "text" disabled= "disabled" id= "Q2" value= "disabled"/> <input type= "Submit" name= "submit" value= "Submit"/> </form> </body> |
Small tips:
Diabled: Can be replaced by ReadOnly, Background-color: #cccccc; Add a gray background color to
| The code is as follows | Copy Code |
<input id= "MyText" type= "text" value= "I can't use it" > |
Note: Document.all.mytext.disabled=true form controls cannot be used
Document.all.mytext.disabled=false form controls can be used
| The code is as follows | Copy Code |
<input id= "MyText" type= "text" value= "I am able to use" > |
jquery set elements of readonly and disabled
1, ReadOnly
| The code is as follows | Copy Code |
$ (' input '). attr ("ReadOnly", "ReadOnly")//sets the INPUT element to ReadOnly $ (' input '). Removeattr ("readonly");//Remove the ReadOnly attribute of the INPUT element There are two ways to set the ReadOnly property for an element and to cancel the ReadOnly property: $ (' input '). attr ("ReadOnly", "ReadOnly")//sets the INPUT element to ReadOnly |
2, disabled
| The code is as follows | Copy Code |
$ (' input '). attr ("Disabled", "disabled")//sets the INPUT element to disabled $ (' input '). Removeattr ("Disabled");//Remove the disabled attribute of the INPUT element
$ (' input '). attr ("Disabled", "disabled")//sets the INPUT element to disabled |
Removal Properties recommended using removeattr () This way, the new version of jquery does not support attr ("ReadOnly", "")
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
