html的input标签disabled和readOnly属性的异同点

最新推荐文章于 2024-12-29 16:53:30 发布
最新推荐文章于 2024-12-29 16:53:30 发布
阅读量407 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html input标签 不可编辑只读 disabled readOnly
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32016019/article/details/78376336
本文探讨了HTML中disabled与readOnly属性的使用区别。disabled使input标签文本框变灰且后台无法获取真实值，而readOnly保留了获取真实值的能力同时保持文本框的只读状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

共同点：disabled和readOnly都能实现input标签文本框的不可编辑和只读功能

异同点：1.disabled可以使input标签文本框变色

disabled最重要的一点就是让input标签文本框“失效”，实质就是后台无法获取到input标签的value的真实值，而是获取到值的是null；readOnly可以取到真实的value值！！！




 


 

 



托马斯奎
关注
浅谈html中input只读属性readonly和disable的区别
09-28
HTML中的`readonly`和`disabled`属性都是用来限制用户对表单元素的交互，但它们在实际应用中具有不同的效果和使用场景。 首先，`readonly`属性主要用于`<input>`（如`text`、`password`）和`<textarea>`元素。它...
html表单属性readonly和disabled的使用方法
09-28
- 使用方法：只需在HTML元素上添加`readonly`属性即可，例如对于`<input>`标签，可以写为`<input type="text" readonly>`。 2. **失效属性（disabled）** - `disabled` 属性则更加严格，它不仅使元素变为不可编辑...
设置input的只读属性
L-BAKE
10-27 1663
<br />input.readOnly = "true";<br /> input.setAttribute("readOnly","true");<br />http://azhp.blog.163.com/blog/static/47736718200871995313811/
关于input标签设置只读属性的问题
weixin_44863665的博客
06-20 1477
在小程序上使用只读属性很多人会遇到一个坑，那就是readonly属性设置没有效果，这是因为小程序不支持此属性，直接使用disabled=true即可，样式上不会发生改变。在开发过程中，经常在表单回显状态下需要设置部分input输入框为只读，然而设置只读属性在pc端h5和小程序上的表现是不一样的。两个属性的差异在于：使用disabled时，鼠标会变成一个禁止的样式，使用readonly就不会有变化。也可以使用disabled=true来实现。使用readonly属性就可以实现只读。
input设置为只读模式
weixin_39784070的博客
11-06 2万+
input框设置为只读依靠两个属性（disabled或readOnly），下面主要说明两者的区别： 1.disabled：作用范围大，所有input类型都有效，但被disabled修饰过的input的值不能随表单提交。 HTML中的表示： JQUERY中的表示：$("#eg1").attr("disabled","disabled"); 2.readOnly：作用范围较小，仅限于text，
让文本框＜input＞只读
weixin_63082074的博客
02-24 4176
让文本框只读
标签中属性disabled和readonly的区别
symgdwyh的专栏
07-29 1650
 这两个属性都会使显示出来的文本框不能输入文字，但是disabled会使文本框变灰，而且通过request.getParameter("name")得不到文本框的内容（如果有内容的话）。 而readonly只是使文本框不能输入文字，外观没有变化，而且通过request.getParameter("name")可以得到文本框中的内容。
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...
.input只读，禁用，必填，提示词（占位符）属性分别是什么？
qq_60504665的博客
06-21 1832
元素有几个常用的属性，包括只读（readonly）、禁用（disabled）、必填（required）和提示词（占位符，placeholder）。属性通常一起使用，以告诉用户哪些字段是必填的，并提供一些指导性的输入建议。属性则用于控制用户的交互行为。
input的 只读 禁用 必填 提示符（占位符）属性分别是什么？
最新发布
2402_84987408的博客
12-29 606
1、只读：readonly：输入框的内容只能查看，不能修改，可以复制和选中文本，就是不能编辑里面的内容。2、禁用：disabled：禁止输入，用户不能点击，不会有任何点击效果，不会提交到表单中，整体是灰色的。4、提示符（占位符）placeholder：在输入框中显示提示信息，当用户输入时，占位符就会消失。3、必填：required：必填选项输入框，在表单提交时，如果输入框为空，就提示用户填写。
HTML 中<input>等其他类似 标签的 disabled 属性
diwenzhan7700的博客
12-11 412
首先：w3school中的介绍 http://www.w3school.com.cn/tags/att_input_disabled.asp disabled = "true" 禁用元素 disabled = "" 启用元素 说明：可能会觉得启用元素是disabled = "false" 但是事实是，在IE中并不支持。 所以一般是使用disabled = "" 启用元素 在J...
js 实现 input 框 是否只读属性
weixin_43862596的博客
03-16 2846
input 框只读属性： readonly 在页面中直接添加为只读时，可在input中直接添加 readonly=“readonly”， 但是如果想通过点击按钮或其他改变值来修改是否只读的属性，需要通过 js（或jquery）来实现。 js 在对于readonly、disabled等属性设置时，有一个小问题：首先， document.getElementById(“id”).readonly = “true”; 设置input为只读， 但是，当通过document.getElementById(“
html input readonly 和 disable的区别
u010090557的博客
07-08 654
  html input readonly 和 disable的区别      Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后...
在HTML的text input控件获取焦点时设置背景颜色
星云互动
04-24 3215
下面的例子展示了在HTML的text input控件获取焦点时设置背景颜色。通过设置background-color样式和:focuse 伪选择器（pseudo-selector）.     &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Setting the background color on a...
js 动态控制 input 框 的只读属性
热门推荐
katherine的专栏
09-09 7万+
input 框的只读属性：  readonly 在页面中直接tianjia
html中input不可用或是只读的几种方式和区别
microdsy的专栏
10-24 1万+
将HTML文本框设为不可编辑文本框。方法1: onfocus=this.blur()<input type="text" name="input1" value="不可编辑文本框" onfocus=this.blur()>方法2:readonly<input type="text" name="input1" value="不可编辑文本框" readonly> <input type="text"
HTML文本框readonly和disabled属性的区别
IT部落格
08-20 1181
如果不想让
js 动态控制 input 框 的只读属性
qq_43304916的博客
11-05 1091
原文：https://blog.youkuaiyun.com/katherine119/article/details/39154615 【题主不会转载文章就直接复制网址了，题主已经试过了，这个方法可行】
如何设置input标签为只读（用于设置选择和显示）
幽默工作室
01-10 1万+
方法 1 强烈推荐：鼠标移到文本框变成小手图标。 <input type="text" id="defaultAddress"  name="defaultAddress" class="input" value="" onfocus=this.blur() />  是一个输入框，用户输入文本的框就是类似于百度的搜索框    value=""说明初始
HTML 中 input标签常见属性和用法
04-28
HTML 中 input 标签是用来创建用户输入表单的元素，它有很多属性和用法，以下是常见的一些： 1. type 属性：用来指定 input 的类型，包括 text、password、checkbox、radio、submit、reset、button、file 等。 2. name 属性：用来指定 input 的名称，用于后台处理表单数据。 3. value 属性：用来指定 input 的值，对于 type 为 text、password、hidden、submit、reset、button 等类型的 input，value 属性表示默认值；对于 type 为 checkbox、radio 等类型的 input，value 属性表示被选中的值。 4. placeholder 属性：用来指定 input 的占位符，显示在 input 为空时的提示文字。 5. required 属性：用来指定 input 是否为必填项。 6. disabled 属性：用来指定 input 是否禁用。 7. readonly 属性：用来指定 input 是否只读。 8. autofocus 属性：用来指定 input 是否自动聚焦。 9. multiple 属性：用来指定 input 是否允许多选，仅适用于 type 为 file 的 input。 10. accept 属性：用来指定 input 可接受的文件类型，仅适用于 type 为 file 的 input。 11. size 属性：用来指定 input 的宽度，以字符为单位。 12. maxlength 属性：用来指定 input 可接受的最大长度。 13. min 属性和 max 属性：用来指定 input 可接受的最小值和最大值，仅适用于 type 为 number、range、date、time、datetime-local 的 input。 14. step 属性：用来指定 input 的步长，仅适用于 type 为 number、range 的 input。 以上是常见的一些 input 属性和用法，不同的 input 类型可能还有其他特殊的属性和用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值