input的两个readonly和disabled区别

最新推荐文章于 2021-03-02 18:16:31 发布
最新推荐文章于 2021-03-02 18:16:31 发布
阅读量648 收藏
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jimolangge123/article/details/49250515
本文详细解释了HTML中readonly与disabled属性的区别，包括它们对输入字段的不同影响及应用场景。指出readonly适用于限制编辑但仍允许提交的情况，而disabled则完全阻止用户交互。

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

readonly:不允许编辑，但是可以在获得焦点并能在form中被提交

disabled:不允许编辑，不能获得焦点并且不能在form中被提交

readonly：只针对input(text/password) textarea有效

disabled:针对所有的表单元素有效


注意：回车是默认的submit触发按键
为防止用户重复编辑提交应该使用disabled属性，将form表单以及submit都disabled掉
jimolangge123
关注
javascript中input中readonly和disabled区别介绍
11-30
在JavaScript中，`readonly`和`disabled`是两个用于HTML表单中控制用户交互的属性。它们虽然都能防止用户修改表单元素的内容，但具体的行为和影响却有所不同。 `readonly`属性主要应用于`<input>`（如`type="text"`...
readonly和disabled的区别
09-06
在网页表单设计中，`readonly` 和 `disabled` 是两个非常常见的属性，它们都用于限制用户对输入字段的编辑，但它们之间存在着显著的区别。理解这些差异对于创建功能完整且用户体验良好的表单至关重要。 首先，`...
input中readonly和disable的区别
恋&空的专栏
10-09 1678
1. disable——完全不可编辑，并且不能复制。 2.readonly——不可b
input属性disabled和readonly的区别（超详细的~~~~）
白小纯的博客
10-16 2万+
1.两种情况的写法，没什么太大的区别，两个属性而已 disabled写法：&lt;input type="text" name="aaa" value="xxx" disabled="true"/&gt; readonly写法：  &lt;input type="text" name="bbb" value="xxx" readonly=&
readonly和disabled区别
weixin_30484247的博客
11-29 94
1.readonly属性只对表单元素的文本框、密码框和 textarea 有效，而disabled属性对所有的表单元素都会有效。 2.设置两个属性的外观不一样，这个自己可以观察一下。 3.设置readonly的表单元素value值依然会被提交，而设置disabled的表单元素值不会被提交。 转载于:https://www.cnblogs.com/mengff/p/7919591.h...
input属性disabled和readonly的区别
热门推荐
symgdwyh的专栏
03-03 6万+
两种属性的写法如下： 1、2、 这两种写法都会使显示出来的文本框不能输入文字， 但disabled会使文本框变灰，而且通过request.getParameter("name")得不到文本框中的内容（如果有的话）， 而readonly只是使文本框不能输入，外观没有变化，而且通过request.getParameter("name")可以得到内容。
html input readonly 和 disable的区别
u010090557的博客
07-08 650
  html input readonly 和 disable的区别      Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后...
Readonly和Disabled的区别
09-28
Readonly和Disabled是HTML表单中的两个重要的属性，它们都可以限制用户对表单元素的交互操作。尽管它们有共同的功能，即防止表单数据被修改，但它们之间存在着本质的区别。 首先，Readonly属性主要应用于input元素...
表单中Readonly和Disabled的区别详解
10-24
在HTML表单中，`readonly` 和 `disabled` 是两个重要的属性，它们都可以用来限制用户对表单元素的交互，但它们之间的区别在于作用范围、提交表单时的行为以及用户体验等方面。 首先，`readonly` 属性主要用于`...
form表单中input readonly 和 disable的区别
wuliEcho的博客
11-26 2127
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonl
disabled 与 readonly的区别
MingleHDU的博客
07-11 426
disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交； readonly 属性规定输入字段为只读。 readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。 input内容会随着表单提交。 ## 无论设置readonly还是disab
input标签disabled属性
weixin_42594143的博客
03-02 1500
disabled 属性规定禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击
关于disabled的一些知识总结
love_mingcheng的博客
01-17 2075
一开始以为设置disabled="true"是为启用，设置为“false”时为禁用，然而这是错的。只要设置了disabled=“xxx”不管里面是什么，效果都是禁用。只允许显示，不允许传参。所以原生设置： 启用--dom.setAttribute("disabled","disabled") 禁用--dom.removeAttribute(“disabled”)jquery设置： $("#id
input中disable与readonly的区别及其相关属性
Janus
01-06 5621
====== input中disable与readonly的区别 ======放在form表单中提交后得不到该值。将disabled="disabled" 改为 readonly = "readonly" 即可设置为disabled的input将会有下面的限制：不能接收焦点使用tab键时将被跳过可能不是successful的被限制的对象值将不会被传递到后台程序。设置为readonly的input将
input只读
我是传奇
07-16 3387
有两种方式可以实现input的只读效果：disabled 和 readonly。自然两种出来的效果都是只能读取不能编辑，可是两者有很大不同。Disabled说明该input无效，及其value不会传递给任何程序，比如asp、php等。Readonly仅仅是无法编辑，不影响其值的传递。Disabled使用：Readonly使用：
my project zradmin front
最新发布
07-24
my project zradmin front
FINEBI新的体会报告
07-24
FINEBI新的体会报告
基于S7-1200 PLC与TP700触摸屏的配方查询系统：SCL语言实现高效管理和扫码数据处理 v1.0
07-24
利用西门子S7-1200 PLC和TP700触摸屏构建的配方查询系统的实现方法。系统采用SCL语言编写，能够高效管理多达20组配方，支持扫码调用和存储扩展。文中展示了具体的编程思路和技术细节，如配方数据结构的设计、扫码处理函数、触屏交互以及存储空间预警等功能的实现。此外，还讨论了调试过程中遇到的问题及其解决方案，如扫码频率过高的处理方法。 适合人群：熟悉PLC编程和工业自动化领域的工程师，尤其是希望深入了解SCL语言和配方管理系统的人群。 使用场景及目标：适用于需要高效管理加工参数和扫码数据的企业生产环境，旨在提高生产效率和灵活性，减少人工干预，确保配方数据的安全性和准确性。 其他说明：本文不仅提供了详细的代码示例，还分享了许多实用的经验技巧，帮助读者更好地理解和应用相关技术。
Hi3516CV610 SVB电压和寄存器对应关系
07-24
文档中详细列出了产品名称为 Hi3516C、版本为 V610 的相关内容，并对可能出现的标志及其含义进行了说明，还包含修订记录，显示该版本为第 1 次临时版本发布。其核心内容是表 1-1 “SVB 电压和寄存器对应关系表”，该表针对 DVDD 电源，电压范围在 0.8V-1.08V 之间，对应的寄存器地址为 0x11029000，调压时需按照特定步骤操作，即通过调节该地址中 0x0XXX19f5 的 XXX 部分（也就是 SVB_PWM 占空比）来设置 SVB 电压。 表中包含 29 组数据，每组数据均列出了寄存器值、对应的设置电压值以及容忍的误差范围（均为 ±0.030V），例如寄存器值 0x000019f5 对应的设置电压为 1.080V，寄存器值 0x010A19f5 对应的设置电压为 0.800V 等。同时，文档特别说明以上表格内容仅供参考，且仅限用于《Hi3516CV610 硬件设计用户指南 (BGA)》和《Hi3516CV610 硬件设计用户指南 (QFN)》中 “SVB 动态调压” 章节推荐的电阻电容参数 SVB 电路的验证，而用于产品的 SVB 电路解决方案则必须严格遵循这两份硬件设计用户指南中该章节的设计要求，任何自行修改 SVB 电路设计导致的问题，海思公司不承担责任。
<input type="text" readonly="readonly" autocomplete="off" placeholder="请选择" class="el-input__inner" style="height: 44px;" disabled="disabled">怎么让这个输入框能够输入
03-12
<think>好的，我现在需要帮助用户解决如何让一个带有特定属性的输入框能够输入的问题。用户提供的HTML代码显示，这个输入框被设置为`readonly`、`disabled="disabled"`，并且`autocomplete="off"`。首先，我得分析这些属性各自的作用。 首先，`readonly`属性会让输入框变为只读，用户不能修改其内容，但内容仍然可以选中和复制。而`disabled`属性不仅使输入框不可编辑，还会使其变灰，无法获得焦点，且数据在表单提交时不会被发送。这两个属性同时存在的话，输入框会被完全锁定。因此，要让输入框能够输入，必须同时移除这两个属性。 接下来是`autocomplete="off"`，这个属性通常用来阻止浏览器的自动填充功能。虽然它不影响输入框的可编辑性，但用户可能希望保留或移除它，这取决于具体需求。如果需要自动填充功能，可以去掉这个属性；否则可以保留。 然后，我需要检查是否有CSS样式可能影响输入框的可编辑状态。例如，用户提供的代码中有`style="height: 44px;"`，这仅设置高度，不会影响功能。但有时候可能会有其他样式比如`pointer-events: none;`或`background-color: #eee;`导致输入框看起来不可用，这时候需要调整CSS。 此外，JavaScript事件监听器也可能阻止输入。例如，如果有`onkeydown`事件返回false，或者阻止默认行为，这需要检查并修改相应的JavaScript代码。 总结步骤应该是：首先移除`readonly`和`disabled`属性，然后处理`autocomplete`根据需要，接着检查CSS和JavaScript是否有其他限制。同时，可能需要调整样式，比如移除灰色背景，让输入框看起来可编辑。 在回答用户时，需要分步骤说明，确保他们能一步步操作。同时，要提醒用户考虑这些修改后的影响，比如表单提交时是否要包含该字段，以及是否需要重新启用自动填充等。</think>要让这个被禁用的输入框恢复可输入功能，需要按以下步骤修改HTML属性： $\boxed{分步解决方案}$ 1. **移除只读属性** - 删除 `readonly="readonly"` - $\Rightarrow$ 原代码：`<input type="text" readonly="readonly"...>` - $\Rightarrow$ 修改后：`<input type="text"...>` 2. **移除禁用属性** - 删除 `disabled="disabled"` - $\Rightarrow$ 原代码：`...disabled="disabled">` - $\Rightarrow$ 修改后：`...>` 3. **可选处理自动填充** - 根据需求选择是否保留 `autocomplete="off"` - 如果需要浏览器自动填充建议，可改为 `autocomplete="on"` 4. **最终可编辑版本** ```html <input type="text" autocomplete="off" placeholder="请选择" class="el-input__inner" style="height: 44px;"> ``` $\boxed{补充说明}$ - 如果页面存在JavaScript控制逻辑，还需检查相关事件监听（如`oninput`/`onkeydown`） - 样式建议：移除原`style="height:44px"`中的灰色背景（如有），可添加`background-color: white` - 表单提交：修改后该输入框的值将参与表单提交 通过上述修改，这个输入框将具备完整的键盘输入、焦点获取、内容编辑功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值