表单只读readonly属性,不要再用disabled了

最新推荐文章于 2024-07-16 09:39:52 发布
最新推荐文章于 2024-07-16 09:39:52 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Veranew/article/details/111042346
版权

一般列表都会有查看和编辑功能，我这傻fufu的用的disabled,然后就这样，很丑。
丑丑的禁用界面
今天突然看到readonly，才想起来还有这个属性！！！之前读法一直有问题，以为是rendon-ly， j今天恍然大悟，是read-only啊，只读啊，多好理解！
用在vue里，原生input标签是这样：
在这里插入图片描述
这里readonly的o大小写都没关系。
但如果是ant-design-vue，最好readOnly或者read-only， 如果用readonly会有警告信息
在这里插入图片描述
只读，文字可以被选中，样式还好看！！

路漫漫其修远兮啊！

Veranew
关注
专栏目录
html表单属性readonly和disabled的使用方法
09-28
- `readonly` 属性用于设置表单元素为只读状态。这意味着用户可以看到元素中的文本，但不能修改它。当用户尝试改变只读字段的值时，浏览器通常会阻止这种行为，但用户仍然可以通过其他方式（如JavaScript）改变其值...
表单元素属性readonly和disabled使用对比
09-28
c) 对于`checkbox`和`radio`，如果想让它们变为只读，虽然没有直接的`readonly`属性，但可以通过绑定点击事件并返回`false`来模拟禁用效果，如在jQuery中使用`bind("click", function() { return false; })`。 总结...
浅谈表单中的只读和禁用属性
12-14
表单中的只读和禁用属性 1. 只读：服务器方不希望用户修改数据，只是要求这些数据在表单中显示。例如注册或交易协议，商品价格等。 2. 禁用：只有满足某个条件后，才能使用某项功能。例如，只有用户同意注册协议后才允许单击”注册“按钮。播放器空间在播放状态不能再单击”播放“按钮等。  只读 通过readonly属性实现 禁用 通过disabled属性实现 例如 <textarea name=”text” rows=”10” cols=”30” readonly=”readonly”><!—此文档属性为只读–> （服务协议的具体内容）…..</textarea> <input type
input表单只读
Ai卿的博客
10-15 228
1.readonly 只读 2.οnfοcus=this.blur() 不聚焦 3.disabled 禁止，提交前可以去除属性就可以提交内容。 $("#airlineCompany").removeAttr("disabled");
表单项 —【只读状态】
Zyl_CN的博客
05-24 377
readonly
表单中的只读和禁用属性
weixin_30432579的博客
06-13 1684
表单中的只读和禁用属性 只读：服务器方不希望用户修改数据，只是要求这些数据在表单中显示。例如注册或交易协议，商品价格等。 禁用：只有满足某个条件后，才能使用某项功能。例如，只有用户同意注册协议后才允许单击”注册“按钮。播放器空间在播放状态不能再单击”播放“按钮等。 只读 通过readonly属性实现 禁用 通过disabled属性实现 例...
Dynamics CRM: 表单(Form)中的显示字段变成只读的几种情况
01-05 1292
有的时候,当我们打开一条记录, 我们会发现这条记录或者记录中的某个字段变成了不可编辑的状态, 但让表单中显示的字段变成只读的情况有很多, 你可以使用JS代码中的setDisabled, 也可以使用系统的配置来完成, 接下来我就来总结一下都有哪几种情况可以让字段变成只读: 在表单中的字段属性里有一个字段行为的设置, 我们以Account实体为例 设置完成后, 打开一条记录, 该字段的旁边会显示一个小锁头的图标, 并且该字段变成不可编辑 在JS代码中使用setDisabled方法设置了该字段 Di
表单元素的“readonly和disabled”属性
g229191727的博客
07-09 628
disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等；Readonly只针对input(text / password)和textarea有效。 表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，该元素的值不会被传递出去；而readonly会将该值传递出去。 解决方法： 1、checkbox使用disa...
浅谈表单元素的readonly和disabled属性
筱葭的博客
03-15 2624
readonly和disabled是用在表单中的两个属性。   相同点： 使用户不能够更改表单域中的内容。   不同点： ①　Readonly只是使表单元素不能输入，外观不会变化；而disabled会使表单元素外观变化，如变灰。 ②　readonly只针对input(text / password)和textarea有效；而disabled对于所有的表单元素都有效，包括select、
html表单控件禁用属性readonly VS disabled介绍
01-21
在html中有两种禁用表单提交的方法，他们分别是：  1.给控件标签加\u4e0areadonly='readonly'...从字面意思我们可以知道，试用readonly属性的控件是只读的,而试用disabled是被禁用的。那么他们的区别是什么呢？  只读
html中只读属性
wang20y8的博客
11-12 4794
把disabled="disabled"改成readonly="readonly" readonly="readonly"的属性，可以查看 http://www.w3school.com.cn/tags/att_input_readonly.asp
表单form中readonly只读和 disabled不可选的异同（超详细 附应用场景）
qq_41968486的博客
08-28 2595
** 表单中readonly只读和 disabled不可选的异同： 好久没有写博客了，最近在学习前端框架 会陆续把一些需要注意的点补上。好了 切入正题。。。 --------------------------------分割线----------------------------------------- 相同点：两者都是用在表单中的两个属性，它们都能够使用户不能更改表单域中的内容。...
【前端4】表单 编辑模式、只读模式：HTML的`readonly`、el-input的v-if=“isEdit“
最新发布
定期分享我的发现和想法，感谢你的陪伴和支持
07-16 1325
用户注册与登录：在用户注册时，表单需要处于编辑模式，允许用户输入信息。而在用户查看个人资料时，可以使用只读模式。信息审核：在信息审核页面，审核人员通常只需要查看信息而无需修改，这时可以使用只读模式。数据展示：在数据展示页面，如报告或统计信息页面，使用只读模式可以防止误操作。
form表单元素设置只读
weixin_33966365的博客
05-05 4893
  form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读 &lt;!-- 方法一：简写 --&gt; &lt;input type="text" name="" value="文本框" class="" readonly/&gt; &lt;!-- 方法二：写全 --&gt;
html input readonly 和 disable的区别
u010090557的博客
07-08 601
  html input readonly 和 disable的区别      Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后...
Readonly和Disabled这两个表单中属性的区别
feng200711021053的专栏
02-06 1125
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在 使用了disabled后，当我们
浅谈html中input只读属性readonly和disable的区别
09-28
HTML中的`readonly`和`disabled`属性都是用来限制用户对表单元素的交互，但它们在实际应用中具有不同的效果和使用场景。 首先，`readonly`属性主要用于`<input>`（如`text`、`password`）和`<textarea>`元素。它...
HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)
2301_78311954的博客
12-08 1839
加上placeholder就会有一个提示你输入的东西！加入required后就必须要填写，不然就提交不了！加上readonly后就不能修改了！这样就把密码框给隐藏了！
【无标题】Ant design form 表单只读设置
xiaoxiaoshanzhai的专栏
12-30 3567
Ant design form 表单设置只读 ，需要设置readOnly属性 如 <a-input placeholder="请输入员工eid" v-model="model.eid" readOnly/>
Ant Design+react 表单只读
wang_59881的博客
06-07 630
表单禁用，样式不好看，不符合甲方标准，看了一下文档，select、radio等都不支持只读状态。在查看弹窗时，传入一个变量，当变量为true时，设置className样式，否则不作操作。point-events可以阻止点击事件的效果，以及鼠标指针显示。鼠标点击不会有任何操作，也不会切换radio和select下拉。利用css3的point-events属性，设置为none。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值