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

最新推荐文章于 2023-12-08 10:41:17 发布
最新推荐文章于 2023-12-08 10:41:17 发布
阅读量2.7k 收藏 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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
表单元素属性readonly和disabled使用对比
09-28
c) 对于`checkbox`和`radio`，如果想让它们变为只读，虽然没有直接的`readonly`属性，但可以通过绑定点击事件并返回`false`来模拟禁用效果，如在jQuery中使用`bind("click", function() { return false; })`。 总结...
html表单属性readonly和disabled的使用方法
12-13
1、readonly 只读属性，这样可以获得value值 2、disabled 失效属性 ， 不可以获得value值
【无标题】Ant design form 表单只读设置
xiaoxiaoshanzhai的专栏
12-30 3323
Ant design form 表单设置只读 ，需要设置readOnly属性 如 <a-input placeholder="请输入员工eid" v-model="model.eid" readOnly/>
HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)
最新发布
2301_78311954的博客
12-08 1415
加上placeholder就会有一个提示你输入的东西！加入required后就必须要填写，不然就提交不了！加上readonly后就不能修改了！这样就把密码框给隐藏了！
Dynamics CRM: 表单(Form)中的显示字段变成只读的几种情况
01-05 1163
有的时候,当我们打开一条记录, 我们会发现这条记录或者记录中的某个字段变成了不可编辑的状态, 但让表单中显示的字段变成只读的情况有很多, 你可以使用JS代码中的setDisabled, 也可以使用系统的配置来完成, 接下来我就来总结一下都有哪几种情况可以让字段变成只读: 在表单中的字段属性里有一个字段行为的设置, 我们以Account实体为例 设置完成后, 打开一条记录, 该字段的旁边会显示一个小锁头的图标, 并且该字段变成不可编辑 在JS代码中使用setDisabled方法设置了该字段 Di
表单form中readonly只读和 disabled不可选的异同（超详细 附应用场景）
qq_41968486的博客
08-28 2459
** 表单中readonly只读和 disabled不可选的异同： 好久没有写博客了，最近在学习前端框架 会陆续把一些需要注意的点补上。好了 切入正题。。。 --------------------------------分割线----------------------------------------- 相同点：两者都是用在表单中的两个属性，它们都能够使用户不能更改表单域中的内容。...
antd-pro下的form使用注意事项
百岁如流富贵冷灰的博客
12-18 6784
好久没有更新博客，因为有了新的任务，我负责全部的页面开发，有点心累。。。 正题开始： antd-pro下的表单如果使用了getFieldDecorator函数对表单项进赋值的话，那么你是无法通过直接设置value来控制表单的值得，例如： &lt;Input placeholder="请输入" value='XXX' /&gt; // 此时赋值会失败，并且控制台会打印错误 解决方法： 1...
html表单控件禁用属性readonly VS disabled介绍
01-21
在html中有两种禁用表单提交的方法，他们分别是：  1.给控件标签加\u4e0areadonly='readonly'...从字面意思我们可以知道，试用readonly属性的控件是只读的,而试用disabled是被禁用的。那么他们的区别是什么呢？  只读
浅谈html中input只读属性readonly和disable的区别
09-28
HTML中的`readonly`和`disabled`属性都是用来限制用户对表单元素的交互，但它们在实际应用中具有不同的效果和使用场景。 首先，`readonly`属性主要用于`<input>`（如`text`、`password`）和`<textarea>`元素。它...
readonly和disabled属性的区别
01-19
1.readonly属性只对表单元素的文本框、密码框和多行文本框有效，而disabled属性对所有的表单元素都会有效。 2.设置两个属性的外观不一样，这个自己可以观察一下。 3.设置readonly的表单元素value值依然会被提交，而...
vue/elementUI 输入框disabled颜色问题解决
weixin_43914278的博客
11-04 7244
elementUI本身输入框el-input自带了disabled属性，但是当你需要覆盖其样式或者自己写一个自己的my-el-input时，不妨用下面的代码，注意opacity 1表示不透明，cursor：表示滑动过去鼠标为禁止样式 /deep/ input[disabled],input:disabled,input.disabled{ -webkit-text-fill-color:#C0C4CC; background: #F5F7FA; -webkit-opacity:1; opac
使用AntdPro创建基于React的管理后台（学习笔记4）（技术笔记2）中 ＜火山引擎后台管理＞商品模块的实现；有代码结构简析；文末附有源码
房森的博客
03-21 2560
.商品模块的实现；有代码结构简析；文末附有源码
ant-design-vue的form表单全局禁用问题
Cainannan1995的博客
03-30 2479
定义一个可接收的参数来判断是否为disabled，然后为dom添加class属性。给class设置一个样式就可以。
ant或者elment的单选按钮和复选框设置只读
luback的博客
09-21 776
【代码】ant或者elment的单选按钮和复选框设置只读。
AntdVue输入框a-input设置只读
qq_44136882的博客
11-11 2751
AntdVue输入框a-input设置只读
ant-design-vue 修改ant-input disabled样式（原先样式他们觉得太深了，把字体原色改明显了，背景色改浅了）
今日最可爱YeahT
05-08 8919
在src目录下新建一个common.less文件，在main.js里面引入这个文件 common.less覆盖原先的样式 /*覆盖ant-design-vue 样式**/ .ant-input[disabled] { color: rgba(0, 0, 0, 0.6); background-color: #f9f9f9; } .ant-select-disabled...
VUE3语法-(readonly的用法)将数据设置成只读模式
雾林小妖的博客
12-01 1792
vue中通过readonly设置数据只读
antd vue a-select
Caomeiguoguo的博客
08-05 813
问题：在写a-select下拉框得时候 给标签加placeholder 页面上显示不出来 解决方法 <a-form-item label="订阅状态"> <a-select :value="queryParam.status" @change="handelselect" placeholder="请选择订阅状态"> <a-select-option v-for="(i,ind) in statusData" :key="ind" :value="
css实现整个表单只读 form readonly
Monicx的博客
07-24 3591
我说的方法只需要给表单加上一个类，就可以让表单只读。 &amp;lt;form class=&quot;form-readonly&quot;&amp;gt;&amp;lt;/form&amp;gt; 方法1: 用:before给form做个看不见的蒙版，遮住下面所有的元素，使之不响应任何事件 .form-readonly{ position: relative; } .form-readonly:before{ co...
jquery设置表单元素只读_JQuery控制input的readonly和disabled属性
05-26
可以使用 jQuery 的 `prop()` 方法来设置表单元素的 `readonly` 和 `disabled` 属性。 例如，要将一个输入框设置为只读，可以使用以下代码： ```javascript $("#input-id").prop("readonly", true); ``` 同样地，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值