javascript中input中readonly和disabled区别介绍

Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：

Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。

例子

代码如下:

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控制代码



代码如下:

<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="修改" onClick="modify_phone()">
</form>
</html>
<script language="javascript">
function modify_phone(){
if(confirm("您确定要修改您的手机号码吗？")){
document.moblie_act_form.mobile.readOnly = false;
document.moblie_act_form.mobile.disabled = false;
}
return true;
}
</script>

实例

代码如下:

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

<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>
</html>

属性 值 描述 disabled disabled

当 input 元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。
注释：不能与 type="hidden" 一同使用。

readonly readonly
指示此域的值不能被修改。
注释：仅可与 type="text" 配合使用。

总结

readonly代码:<input type="text" name="readonly" readonly="readonly" />
readonly不可编辑，可复制，可选择,可以接收焦点但不能被修改，后台会接收到传值.
disabled代码: <input type="text" name="disabled" disabled="disabled" />
disabled不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值

赞 (0)

相关推荐

  • readonly和disabled属性的区别

    标签的readonly和disabled属性的区别: 在表单元素中,readonly和disable有类似之处,因为它们都可以将一些表单元素设置为"不可用"状态,当然它们之间的区别是巨大的,下面就介绍一下这个两个属性有哪些区别,希望能够给需要的朋友带来一定的帮助. 两个属性不同点列举: 1.readonly属性只对表单元素的文本框.密码框和多行文本框有效,而disabled属性对所有的表单元素都会有效. 2.设置两个属性的外观不一样,这个自己可以观察一下. 3.设置readonly的表

  • jquery设置元素的readonly和disabled的写法

    Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: 1.readonly 复制代码 代码如下: $('input').attr("readonly","readonly")//将input元素设置为readonly $('input').removeAttr("readonly");//去除input元素的readonly属性 if($('input').attr("readonly

  • HTML中Select不用Disabled实现ReadOnly的效果

    方法如下: 复制代码 代码如下: <select onbeforeactivate="return false" onfocus="this.blur()" onmouseover="this.setCapture()" onmouseout="this.releaseCapture()">   <option>1</option>  </select>

  • readonly和disabled的区别

    Untitled Document [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 表单中Readonly和Disabled的区别详解

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(

  • jquery批量设置属性readonly和disabled的方法

    Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: 1.readonly 复制代码 代码如下: $('input').attr("readonly","readonly")//将input元素设置为readonly $('input').removeAttr("readonly");//去除input元素的readonly属性 if($('input').attr("readonly

  • javascript中input中readonly和disabled区别介绍

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等.但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而 readonly会将该值传递出去(

  • jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

  • oracle中存储函数与存储过程的区别介绍

    在oracle中,函数和存储过程是经常使用到的,他们的语法中有很多相似的地方,可是也有它们的不同之处,这段时间刚学完函数与存储过程,来给自己做一个总结: 一:存储过程:简单来说就是有名字的pl/sql块. 语法结构: create or replace 存储过程名(参数列表) is --定义变量 begin --pl/sql end; 案例: create or replace procedure add_(a int,b int) is c int; begin c:=a+b; dbms_ou

  • MyBatis中关于resultType和resultMap的区别介绍

    MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表示返回类型的(对应着我们的model对象中的实体),而resultMap则是对外部ResultMap的引用(提前定义了db和model之间的隐射key-->value关系),但是resultType跟resultMap不能同时存在. 在MyBatis进行查询映射时,其实查询出来的每一个属性都是放在一个对应的Map里面的,其中键是属性名,值则是其对应的值.

  • 深入理解Python中的 __new__ 和 __init__及区别介绍

    本文的目的是讨论Python中 __new__ 和 __ini___ 的用法. __new__ 和 __init__ 的区别主要表现在:1. 它自身的区别:2. 及在Python中新式类和老式类的定义. 理解 __new__ 和 __init__ 的区别 这两个方法的主要区别在于:__new__ 负责对象的创建而 __init__ 负责对象的初始化.在对象的实例化过程中,这两个方法会有些细微的差别,表现于:如何工作,何时定义. Python中两种类的定义方式 Python 2.x 中类的定义分为

  • Java中关键字final finally finalize的区别介绍

    Java中关键字final finally finalize的区别介绍

    目录 1. final 1.1 final修饰属性 1.2 final修饰方法 1.3 final修饰类 2. finally 3. finalize 这三个除了长得像以外,好像没什么联系 1. final final意为“最后的”,它是Java中的一个关键字. final可以修饰属性.方法.类. 1.1 final修饰属性 从final的含义就不难理解用final修饰内容的用意.final修饰属性,就表示这个属性是“最终的”,也就是不可更改的,换成我们熟悉的名词,也就是“常量”. privat

  • ASP.NET Core MVC中Required与BindRequired用法与区别介绍

    ASP.NET Core MVC中Required与BindRequired用法与区别介绍

    在开发ASP.NET Core MVC应用程序时,需要对控制器中的模型校验数据有效性,元数据注释(Data Annotations)是一个完美的解决方案. 元数据注释最典型例子是确保API的调用者提供了某个属性的值,在传统的ASP.NET MVC中使用的是RequiredAttribute特性类.该属性仍然可以在ASP.NET Core MVC中使用,但也提供了一个新的特性类BindRequiredAttribute. 今天让我们来看看它们之间的细微差别. RequiredAttribute的典

  • Javascript:为input设置readOnly属性(示例讲解)

    1.js为<input>设置readOnly属性 <textarea name="content" id="content" cols="27" rows="6"></textarea> var cObj = document.getElementById("content"); cObj.setAttribute("readOnly",'true')

  • 在javaScript中关于submit和button的区别介绍

    在javaScript中关于submit和button的区别介绍

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次.或者在使用submit时验证时加return true或false. submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交

  • Python中input和raw_input的一点区别

    使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 当输入为纯数字时: input返回的是数值类型,如int,float raw_inpout返回的是字符串类型,string类型 输入字符串为表达式 input会计算在字符串中的数字表达式,而raw_input不会. 如输入"57 + 3": input会得到整数60 raw_input会得到字符串"57 + 3" python input的实现 看py

随机推荐