Introduction to the difference between readonly and disabled in input in javascript

Readonly and Disabled are two properties used in forms, both of which enable users to not change content in the form field. But there are slight differences between them, and the summary is as follows:

Readonly only works for input(text/password) and textarea, while disabled is valid for all form elements, including select, radio, checkbox, button, etc. However, after the form element is disabled, when we submit the form in POST or GET, the value of this element will not be passed out, and readonly will pass the value out (this case occurs when we set the textarea element in a form to disabled or readonly, but submit button can be used).

example

Copy the codeThe code is as follows:

 
body> 
<form  name="form1" method="get" action=""> 
<input name="q1" type="text"  value="readonly" readonly="true" /> 
<input name="q2" type="text" disabled="disabled"  value="disabled" /> 
<input type="submit" name="Submit" value="Submit" /> 
</form> 

js control code

Copy the codeThe code is as follows:

 
<body> 
<form enctype="multipart/form-data" action="" method="post" name="moblie_act_form"  > 
<input type="text" class="input"  name="mobile" value="{$mobile}" readonly="true" disabled="disabled"> 
<input type="button" value="Modify" onClick="modify_phone()">
</form> 
</html> 
<script language="javascript"> 
function modify_phone(){ 
if(confirm("Are you sure you want to change your mobile number?")){
document.moblie_act_form. = false; 
document.moblie_act_form. = false; 
} 
return true; 
} 
</script> 

Example

Copy the codeThe code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"> 
<html xmlns="http:///1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<form  name="form1" method="get" action=""> 
<input name="q1" type="text"  value="readonly" readonly="true" /> 
<input name="q2" type="text" disabled="disabled"  value="disabled" /> 
<input type="submit" name="Submit" value="Submit" /> 
</form> 
</body> 
</html> 

Attribute Value Description disabled disabled

Disable 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
The value indicating that this field cannot be modified.
Note: Only available with type="text".

Summarize

readonly code:<input type="text" name="readonly" readonly="readonly" />
readonly cannot be edited, can be copied, can be selected, can receive focus but cannot be modified, and the value will be received in the background.
disabled code: <input type="text" name="disabled" disabled="disabled" />
Disabled cannot be edited, copied, selected, cannot receive focus, and the background will not receive the transmitted value.