Home > Developer > JavaScript

Differences between readonly and disabled in input in JavaScript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

ReadOnly and disabled are two properties that are used in a form to make it impossible for users to change the contents of a form field. But there is a slight difference between them, summed up as follows:

ReadOnly is only valid for input (Text/password) and textarea, and disabled is valid for all form elements, including Select, Radio, CheckBox, Button, and so on. However, after the form element is used disabled, when we submit the form as a post or a get, the value of the element is not passed out, and readonly passes the value out ( This occurs when we set the TEXTAREA element in a form to Disabled or readonly, but the Submit button is available.

Example

The code is as follows Copy Code

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>


JS Control Code

The code is as follows Copy Code

<body>
<form enctype= "Multipart/form-data" action= "sign.php" method= "post" name= "Moblie_act_form" id= "Moblie_act_form" >
<input type= "text" class= "input" id= "mobile" name= "mobile" value= "{$mobile}" readonly= "true" disabled= "disabled" >
<input type= "button" value= "Modify" onclick= "Modify_phone ()" >
</form>
<script language= "JavaScript" >
function Modify_phone () {
if (confirm) ("Are you sure you want to modify your mobile phone number?") ")){
Document.moblie_act_form.mobile.readOnly = false;
document.moblie_act_form.mobile.disabled = false;
}
return true;
}
</script>


Instance

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>

Property Value Describe
Disabled Disabled

This element is disabled 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".

Summarize

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More