readonly和disabled的区别(disable与readonly的区别)

http://www.itjxue.com  2023-01-29 18:36  来源:未知  点击次数: 

readonly 和 disable的区别

从英文翻译readonly是只读模式,就是可以读取数据但不能写入数据,disable是无效的意思,既不能读也不能写。

Readonly和Disabled的区别

eadonly 属性规定文本区为只读。

在只读的文本区中,无法对内容进行修改,但用户可以通过 tab 键切换到该控件,选取或复制其中的内容。

可以设置 readonly 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该文本区的使用。然后,可以使用 JavaScript 来清除 readonly 属性,以使文本区变为可编辑状态。

isabled 属性规定应该禁用 input 元素。

disabled 属性可设置或返回是否禁用单选按钮。

注释:disabled 属性无法与 input type="hidden" 一起使用。

 

disabled 属性会让元素不能获取焦点(比如你按TAB键不能移动到具有disabled属性的元素上),而readonly是可以获得焦点的。

css中 readonly和disabled的区别

两者都起到form表单不能编辑文本框不能输入的作用,区别如下:

1.样式不同

(1)readonly表示只读,一般表示对文字内容只读,即不可更改内容,使用时外观无变(2)disabled表示是残疾,是残废,不管什么内容都会无效;使用时文本框会变灰

2.有效范围不同

(1)readonly只针对input和textarea之类的可以输入的文本有效(2)disabled对所有的表单元素都有效

3.是否获取鼠标标点

(1)readonly为true用户不能编辑但光标可以聚焦(2)disabled为true光标不能聚焦也不可编辑,无鼠标点击或进入等事件

4.是否能够提交数据

(1)readonly不影响表单提交等问题(2)disabled不支持表单等的值被提交

input属性disabled和readonly的区别

1、input type="text" name="name" value="xxx" disabled="true"/

2、input type="text" name="name" value="xxx" readonly="true"/

这两种写法都会使显示出来的文本框不能输入文字,

但disabled会使文本框变灰,而且通过request.getParameter("name")得不到文本框中的内容(如果有的话),

而readonly只是使文本框不能输入,外观没有变化,而且通过request.getParameter("name")可以得到内容。

表单中Readonly和Disabled的区别

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, ...

readonly和disabled区别详解

在中input的属性readonly和disabled让很多用户都觉得是一样的 下面我来给大家介绍readonly和disabled区别 有需要了解的朋友可参考

?

先看input的属性定义 ? 属性 值 描述

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不可编辑 不可复制 不可选择 不能接收焦点 后台也不会接收到传值

我们常常在用户按了提交按钮后 利用javascript将提交按钮disabled掉 这样可以防止网络条件比较差的环境下 用户反复点提交按钮导致数据冗余地存入数据库

disabled和readonly这两个属性有一些共同之处 比如都设为true 则form属性将不能被编辑 往往在写js代码的时候容易混合使用这两个属性 其实他们之间是有一定区别的

如果一个输入项的disabled设为true 则该表单输入项不能获取焦点 用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效 最重要的一点是当提交表单时 这个表单输入项将不会被提交

而readonly只是针对文本输入框这类可以输入文本的输入项 如果设为true 用户只是不能编辑对应的文本 但是仍然可以聚焦焦点 并且在提交表单的时候 该输入项会作为form的一项提交

?代码如下 复制代码

!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" "

xmlns="

head

meta equiv="Content Type" content="text/; charset=utf " /

titleUntitled Document/title

/head

body

form id="form " name=form action=""

input name=q type=text id="q " value="readonly" readonly="true" /

input name=q type=text disabled id="q " value="disabled" /

input type=submit name=Submit value="Submit" /

/form

/body

/

小技巧

diabled:可用readonly代替 background color:#cccccc;加上灰色背景色就可以

?代码如下 复制代码

input id="mytext" type=text value="我是不能用的" input type=button value="disabled" onClick="javascript: document all mytext disabled false " input type=button value="enable" onClick="javascript: document all mytext removeAttribute( disabled )"

注意 document all mytext disabled 表单控件不能用

document all mytext disabled 表单控件能用

?代码如下 复制代码

input id="mytext" type=text value="我是能用的" input type=button value="disable" onClick="if (mytext disabled mytext disabled value= 我是不能用的 ;this value= enable } else { mytext disabled value= 我是能用的 ;this value= disable }"

jquery设置元素的readonly和disabled

readonly

?代码如下 复制代码

$( input ) attr("readonly" "readonly")//将input元素设置为readonly

$( input ) removeAttr("readonly");//去除input元素的readonly属性 ? ??? if($( input ) attr("readonly")==true)//判断input元素是否已经设置了readonly属性

对于为元素设置readonly属性和取消readonly属性的方法还有如下两种 ??? $( input ) attr("readonly" true)//将input元素设置为readonly ??? $( input ) attr("readonly" false)//去除input元素的readonly属性

$( input ) attr("readonly" "readonly")//将input元素设置为readonly ??? $( input ) attr("readonly" "")//去除input元素的readonly属性

disabled

?代码如下 复制代码

$( input ) attr("disabled" "disabled")//将input元素设置为disabled

$( input ) removeAttr("disabled");//去除input元素的disabled属性 ? ??? if($( input ) attr("disabled")==true)//判断input元素是否已经设置了disabled属性

??? 对于为元素设置disabled属性和取消disabled属性的方法还有如下两种 ??? $( input ) attr("disabled" true)//将input元素设置为disabled ??? $( input ) attr("disabled" false)//去除input元素的disabled属性

$( input ) attr("disabled" "disabled")//将input元素设置为disabled ??? $( input ) attr("disabled" "")//去除input元素的disabled属性

lishixinzhi/Article/program/Java/JSP/201311/20064

(责任编辑:IT教学网)

更多

推荐Windows服务器文章