辨析disabled和readonly的异同

最新推荐文章于 2023-04-14 15:06:28 发布
原创 最新推荐文章于 2023-04-14 15:06:28 发布 · 1.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML #input #disabled #readonly

共同点

  • 这两种写法都会使显示出来的文本框不能输入文字。
  • 可以通过js脚本修改其中内容。
  • 想要撤销，只能删除相应的属性，设置flase无效

disabled特点

  • disabled不会对任何事件进行响应（比如：click事件无效）。
  • disabled的元素的值不会提交。
  • disabled属性可以用于所有的表单元素。

readonly特点

  • readonly会对事件进行响应。
  • readonly的元素的值会提交。
  • readonly属性只对<input type="text">、<textarea>和<input type="password">有效。
disabled与readonly的作用及区别介绍
09-28
在网页开发中，`disabled` 和 `readonly` 是两个非常重要的属性，它们都用于限制用户对HTML表单元素的交互，但它们之间存在着显著的区别。接下来我们将深入探讨这两个属性的作用和差异。 首先，`readonly` 属性主要...
HTML中Select不用Disabled实现ReadOnly的效果
09-06
而题目中提到的需求是“HTML中Select不用`Disabled`实现`ReadOnly`的效果”，即保持下拉列表可查看，但阻止用户交互。 要实现这种效果，我们可以利用事件处理程序来模拟只读状态，而不直接使用`disabled`属性。以下...
input属性disabled和readonly的区别
热门推荐
symgdwyh的专栏
03-03 6万+
两种属性的写法如下： 1、2、 这两种写法都会使显示出来的文本框不能输入文字， 但disabled会使文本框变灰，而且通过request.getParameter("name")得不到文本框中的内容（如果有的话）， 而readonly只是使文本框不能输入，外观没有变化，而且通过request.getParameter("name")可以得到内容。
html input readonly 和 disable的区别
weixin_33853827的博客
03-30 577
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会...
Readonly和Disabled的区别
09-28
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，我在实践中得到了一些规律
disabled与readonly的区别
sunny_LI
11-23 1753
在更新功能的时候，有几个属性值是不变的，可以通过设置隐藏的input框来在两个action中传值。但是它是隐藏的，不能展示出来。我想把模型中的某几个属性设置成只可在页面显示，不可编辑的状态。用disabled实现了功能： 订单编号： " class="bg"/>         可是却在form表单提交之后，在action中获取模型对象中的oid属性值为null。
disabled和readonly的区别
ztao2333的博客
07-13 470
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：        Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而read...
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...
HTML中disabled和readonly的区别
qq_41821067的博客
09-10 554
disabled不可以写，也不可以提交到数据库那边 readonly是只能读不能写，但可以提交到数据库那边
disabled和readonly 以及焦点问题
全网同名：PBitW！ 可以去掘金关注我！
10-30 2213
1、disabled和readonly 联系 区别 案例 什么属性可以阻止选中或者拷贝文本呢？ hidden 属性是什么？ 那么hidden为什么不能和disabled一起使用呢？ 2、disabled之后，上面的事件还在吗？ 3、焦点是什么？ DOM0级事件、DOM2级事件是啥？
disabled和readonly的区别是什么
fanzh90的博客
04-13 831
disabled和readonly的区别是什么: 这两个属性有类似之处，但是区别也是巨大的，之所以说类似，是因为这两个属性好像都貌似能够将指定的元素设置为"不可用"状态，下面就简单介绍一下它们两个的区别,希望能够给大家带来一定的帮助。 一.作用范围不同: disabled属性可以用语所有的表单元素。 readonly属性只对、和有效。 二.对元素的影响程度不同: disabled属性阻
disabled与readonly区别
文龙刚的博客
04-14 636
Readonly和Disabled 两种属性的写法如下。
关于disable和readonly的区别
qq_29436593的博客
12-28 905
前几天在页面上的给某个input框设置了一个disable属性，然后在用form提交表单的过程中，发现后台的实体类得不到这个字段的值，当时就有点懵，当然我的第一反应不是百度更不是问人，毕竟这种问题实在是不太好意思问的出口，自己默默的把表单和后台实体类的字段属性甚至于数据库的字段都（虽然和数据库并没有半毛钱关系）梳理了一遍，发现任然是获取不到这个字段的值，嗯，纠结了一会之后，抱着死马当活马医的态度把
HTML中readonly与disabled的异同
Denglishang的博客
05-23 420
相同点：readonly和disabled的作用是使用户不能够更改表单域中的内容,都可以防止用户键入.不同点：1.dsiabled使文本框及字体变灰,readonly则不会.2.readonly只对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等.3.在表单元素使用了disabl...
readonly与disabled的区别
qq_44473483的博客
07-01 1516
删除线格式 ## 一. 范围不同 readonly 只对 和 标签有效 disabled 对所有表单元素都有效, 包括：, , , , , 等 二. 程度不同 readonly 只是将元素设置为只读，不可输入，对其它操作没有影响 disabled 阻止元素的一切操作。包括 获取焦点，点击事件等 三. 表单提交 readonly 只是将元素设置为只读，不影响表单提交 disabled 设置了该属性的表单元素，值将不会随着表单一起提交 四. JavaScript操作 设置了readonly和disabled
disable与readonly
麦兜的专栏
11-07 870
今天改bug遇见一个折磨人的问题。由于直接进的是修改页面、会根据标示去判断是否允许修改字段、找半天没发现有什么问题但是、每次从新保存后此时标示会改为不可修改、当再次点击保存、部分数据会丢失、后台数据排查发现此时页面部分数据为空、。然后找页面问题、看半天发现未保存上的数据用了disable,其他用readonly的不存在数据丢失问题、才想起来可能问题出现在这个disable上、随百度查之、 Rea
html 除了disabled和readonly input框怎么禁止输入还能提交form表单
最新发布
12-23
在 HTML 中，除了 `disabled` 和 `readonly` 属性外，还可以通过 JavaScript 来实现让 `input` 框禁止输入但仍能提交 `form` 表单的效果。 ### 方法一：使用事件监听器阻止输入 可以通过 `addEventListener` 方法监听 `keydown`、`keypress`、`paste`、`drop` 等事件，然后阻止这些事件的默认行为，从而禁止用户输入，但表单提交时仍然可以获取 `input` 框的值。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <form action="#" method="post"> <input type="text" id="myInput" name="myInput" value="禁止输入但可提交"> <input type="submit" value="提交"> </form> <script> const input = document.getElementById('myInput'); // 阻止键盘输入 input.addEventListener('keydown', function (e) { e.preventDefault(); }); // 阻止粘贴 input.addEventListener('paste', function (e) { e.preventDefault(); }); // 阻止拖放 input.addEventListener('drop', function (e) { e.preventDefault(); }); </script> </body> </html> ``` ### 方法二：设置样式并通过事件控制 可以通过设置 `input` 框的样式让其看起来不可输入，同时通过事件控制禁止用户输入。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 设置输入框不可点击 */ #myInput { pointer-events: none; background-color: #f0f0f0; } </style> </head> <body> <form action="#" method="post"> <input type="text" id="myInput" name="myInput" value="禁止输入但可提交"> <input type="submit" value="提交"> </form> <script> const input = document.getElementById('myInput'); // 阻止键盘输入 input.addEventListener('keydown', function (e) { e.preventDefault(); }); // 阻止粘贴 input.addEventListener('paste', function (e) { e.preventDefault(); }); // 阻止拖放 input.addEventListener('drop', function (e) { e.preventDefault(); }); </script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值