页面上的disabled与readonly

最新推荐文章于 2024-04-24 12:00:00 发布
原创 最新推荐文章于 2024-04-24 12:00:00 发布 · 813 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#服务器 #html

本文探讨了HTML中表单元素使用disabled属性与readonly属性的不同之处。disabled会导致修改的数据无法通过POST方式发送到服务器，可能引起数据丢失；而readonly则会提交修改的数据，但不适用于所有类型的表单元素。

 

  将一个表单元素disabled后,将导致修改不能被Post到服务器端,因此可能导致修改丢失(Post上去将是空数据)

  在需要设计用户操作界面(流程)时可以临时将disabled设置成true,在form提交时再设置回false.

  readonly将会提交修改数据,但是下拉框等不支持,因此不怎么通用.

 

  参考:

  关于html元素的disabled,readonly 的分析

WDFrog
关注
前端页面涉及disabled被写死数据的传输问题
weixin_42292939的博客
11-15 1697
背景 常常我们因为各种情况，需要将页面某一模块内容设为不可编辑状态，也就是“写死”,然后被“写死”的模块的值，又是需要随着网页的表单提交到服务器处理，此时便会遇到被“写死”模块的值无法传送。 在此之前，博主在网上搜索查阅了很多帖子，尚未有人提到解决办法。可能因为这种小问题，大佬们都心知肚明，也觉得没总结的必要，但是对刚入行不久的小白来说，很多细枝末节方面的问题，往往比主要功能的编码更令人头疼。 故...
disabled与readonly的作用及区别介绍
09-28
在网页开发中，`disabled` 和 `readonly` 是两个非常重要的属性，它们都用于限制用户对HTML表单元素的交互，但它们之间存在着显著的区别。接下来我们将深入探讨这两个属性的作用和差异。 首先，`readonly` 属性主要...
页面disabled 不能提交
yangpingzhun的博客
01-18 220
在页面上有一个标签是disabled=true的，提交的Action中就是null，说明这个标签没能提交上去，从网上查了一些资料，说disabled=true的标签是不能提交的，要改成readonly=true，这样就可以提交了， 但是用readonly的话，就看不出来时可以编辑还是不可以编辑了，个人感觉这样不好，所以我还是再加了一个hidden标签用来提交。...
网页限制F12，接触教程
cyz141001的博客
02-16 2000
/ 开启右键菜单// 开启文字选择// 开启复制// 开启剪切// 开启粘贴// 开启F12键。
disable与readonly
麦兜的专栏
11-07 870
今天改bug遇见一个折磨人的问题。由于直接进的是修改页面、会根据标示去判断是否允许修改字段、找半天没发现有什么问题但是、每次从新保存后此时标示会改为不可修改、当再次点击保存、部分数据会丢失、后台数据排查发现此时页面部分数据为空、。然后找页面问题、看半天发现未保存上的数据用了disable,其他用readonly的不存在数据丢失问题、才想起来可能问题出现在这个disable上、随百度查之、 Rea
readonly和disabled的作用？区别？别翻了，这有精细汇总齐的秘籍！
Yummy的博客
04-06 2125
目录 一、介绍及作用 二、用法 三、区别 1、外观变化不同 2、作用范围不同 3、对元素的影响程度不同 4、表达提交情况不同 四、常用情况 1、关于readonly 2、关于disabled 一、介绍及作用 readonly 把输入的字段设为只读，但是没有禁用 readonly=” readonly”，将元素设置为只读，其他操作正常。 disabled 禁用一个input元素。 disabled="disabled"，阻止对元素的一切操作，例如获取焦点，点击事件等。 read...
textarea的disabled与readonly属性具体用法介绍
09-28
理解`disabled`和`readonly`属性的使用可以帮助我们更好地控制用户与网页的交互，提供更友好的用户体验，并确保表单数据的正确性。在设计表单时，根据需求选择合适的属性能帮助你实现预期的功能。
Readonly和Disabled的区别
09-28
与Readonly不同，Disabled属性可以用于所有的表单元素，包括input、textarea、select、radio、checkbox以及按钮等。当元素被设置为Disabled时，它不仅禁止用户输入或选择，而且元素在表单提交过程中不会将其值发送到...
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看...与`disabled`不同，`readonly`的input字段在表单提交时，其`value`会正常传递到服务器。这就意味着，即使用户不能更改，服务器依然能接收到这些数据。例如： ```html ...
readonly和disabled的区别
09-06
在网页表单设计中，`readonly` 和 `disabled` 是两个非常常见的属性，它们都用于限制用户对输入字段的编辑，但它们之间存在着显著的区别。理解这些差异对于创建功能完整且用户体验良好的表单至关重要。 首先，`...
css readonly和disabled的区别
qq_47776536的博客
12-23 8580
一、两者的联系 1、两个属性都可以作用于input等表单元素上，都使得元素成为“不可用”的状态； 2、两者的字面意义： （1）readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别； （2）disabled表示“使残废，使无效”，都残废了，不管是什么内容，都是无效的。 二、两者的区别： 1、readonly和disabled作用元素的范围不同： 由上图可见，readonly并没有对input[type=“button”]产生作用，按钮效果
前端 表单中的readOnly 和 disabled有什么区别？
qq_44327851的博客
04-24 975
readOnly和disabled是两种在表单元素中设置的属性，用于控制用户对表单元素的操作权限。
浅谈disabled与readonly的使用区别
weixin_46300114的博客
07-24 1026
是用来限制用户与表单元素进行交互的两个属性。属性则只是限制用户对其进行修改。选择使用哪一个属性取决于我们想要实现的交互限制的具体需求。可以发现这里使用readonly达到了我们本次需求的目的。将disabled修改为readonly。属性会完全禁用一个表单元素，而。
在jsp页面，disabled和readonly的区别
YZBDaiTu的博客
09-14 2217
关于disabled和readonly的区别 在写前端页面的时候，写编辑功能时候，有些字段需要展示给客户，但是又不想让客户修改。我们自然而然的想到了disabled和readonly，在使用过程中，因为感觉readonly比较万能，所以都选择使用了readonly。但实际上，遇见下拉选择框，它就会失效。我又尝试disabled，这个确实可以不展示给客户，但是在更新数据库时出现了为空的问题。因此在此总结了一点关于disabled和readonly的知识。 区别一 disabled表示“使无效”，即这一区
表单中的readOnly 和disabled
weixin_34278190的博客
10-07 474
adonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。 但是表单元素在使用了disabled后，当我们将表...
HTML disabled属性的启用和禁止
热门推荐
John的专栏
01-18 3万+
HTML中的input元素、button元素、option元素等都具有一个disabled属性。  当赋予该属性时该元素将变得不可交互，如下代码所示：  Html代码   input type="button" disabled="disabled" value="测试按钮">   其中属性值“disabled”可以替换成任何的其它单词甚至是“enabled”（
html input readonly 和 disable的区别
u010090557的博客
07-08 671
  html input readonly 和 disable的区别      Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后...
Html readonly与disabled的区别
每天进步一点点 时间会让你成为巨人
08-31 4792
readonly和disabled的作用是使用户不能够更改表单域中的内容,都可以防止用户键入. 1.dsiabled使文本框及字体变灰,readonly则不会. 2.readonly只对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等. 3.在表单元素使用了disabled
readonly和disabled
Donnnies的博客
09-21 321
ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容.但是二者还是有着一些区别的：1、Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。2、在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会
readonly直接显示在页面上什么情况
最新发布
11-01
<think>我们讨论的是HTML输入框的`readonly`属性。当在输入框上设置`readonly`属性时，用户不能修改输入框的值，但该值仍然会随表单提交。与`disabled`属性不同，`disabled`会阻止输入框的值被提交。 </think>当输入框的 `readonly` 属性直接显示在页面上时，会出现以下情况和特征： ### `readonly` 属性的视觉和行为表现 1. **视觉样式差异** - 输入框背景色通常变为浅灰色（浏览器默认样式） - 边框颜色变浅（如 Chrome 的淡蓝色边框消失） - 鼠标悬停时保持箭头指针（而非文本输入光标） ```html <!-- 只读状态示例 --> <input type="text" value="2023-06-15 14:30:00" readonly> ``` ![只读输入框效果](https://via.placeholder.com/300x40/e0e0e0/000000?text=2023-06-15+14:30:00+%28不可编辑%29) 2. **用户交互限制** - 无法通过键盘修改内容（退格键/删除键无效） - 无法通过鼠标拖拽选中文本（部分浏览器允许选中但不可编辑） - 右键菜单的"粘贴"功能禁用 3. **特殊场景的显示异常** | 场景 | 现象 | 解决方案 | |------|------|----------| | 移动端 | 键盘不会弹出 | 预期行为 | | 复制操作 | 允许复制内容 | 添加 CSS `user-select: none` 禁止 | | 打印页面 | 显示为普通文本框 | 添加媒体查询隐藏 `@media print { input[readonly] { -webkit-appearance: none; } }` | ### 与 `disabled` 属性的关键区别 ```html <!-- 对比示例 --> <input type="text" value="只读字段" readonly> <!-- 可复制/提交 --> <input type="text" value="禁用字段" disabled> <!-- 灰显/不可提交 --> ``` | 特性 | `readonly` | `disabled` | |------|------------|------------| | 值是否提交 | ✅ 是 | ❌ 否 | | 文本可选择 | ✅ 是 | ❌ 否 | | 键盘焦点 | ✅ 可获取 | ❌ 不可获取 | | 视觉提示 | 轻微灰显 | 深度灰显 | | 表单重置 | 保持不变 | 重置为空 | ### 最佳实践建议 1. **明确视觉提示** 添加自定义样式强化只读状态： ```css input[readonly] { background-color: #f8f9fa; border: 1px dashed #ccc; cursor: not-allowed; } ``` 2. **防止误操作** 在只读框旁添加文字提示： ```html <input type="text" value="2024-07-01 09:00:00" readonly> <span style="color:#f00; margin-left:5px">（此字段自动生成）</span> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值