antd input框使用disable问题

最新推荐文章于 2024-05-29 20:07:03 发布
原创 最新推荐文章于 2024-05-29 20:07:03 发布 · 3.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #webview

本文探讨了在Angular项目中设置nz-input组件disabled属性时遇到的问题及解决方案。详细介绍了不同实现方式下组件的表现差异，包括鼠标悬停显示不可输入标志但仍能获取焦点的问题，并给出了一种既符合预期又无警告信息的实现方案。

8.5x版本，12版本的话用官网就可行(不过不能用于form，8.5x版本在12版本的from中也不可以了，去掉nz-input可行不过得自己写样式)

如果按照官网的方法

<input nz-input placeholder="Basic usage" [(ngModel)]="value" [disabled]="true" />

官方示例是正常的，但用在自己的项目中鼠标悬停会有一个红色的不可输入符号，但是依然可以获取焦点并修改值

如果使用html5 

<input nz-input placeholder="Basic usage" [(ngModel)]="value" disabled="true" />页面效果正常，控制台会抛出警告

想要得到官网示例的效果同时没有警告信息可以使用

<input type="text" nz-input [attr.disabled]="true" />

参考博文Angular7设置Input的disabled属性_henreash的专栏-优快云博客

之前也有看过不知道是不是这个了，当时忘了记录这个问题，补上了

input取消背景颜色，尤其是边框的背景颜色覆盖了外边包裹的背景颜色时需要。
易天海
06-27 2835
<div class="wrapper-search"> <div class="search"> <form target="_self" action="?"> <input type="text" name="kw" class="txt" va...
【Ant-Desgin-React 穿梭框】表格穿梭框，树穿梭框逻辑代码(只能包含不含子类的子类)
云散的博客
04-24 963
一些穿梭框的基础API以及一些高级使用方法
ant-design-vue 修改ant-input disabled样式（原先样式他们觉得太深了，把字体原色改明显了，背景色改浅了）
今日最可爱YeahT
05-08 9990
在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...
antd 表单项联动验证时，disabled属性不生效
一枚不断学习的小码农一枚~
11-07 1864
在antd表单中，表单项验证条件是根据其他表单项的值决定的，比如当前【时间限制】选择【无】时，【限制时段】表单项不可用所以我单纯使用是不生效的，因为，而直接使用 【获取表单字段属性】有可能是上一次的状态 ，导致渲染失败。
使input文本框不可编辑的3种方法
不吃草的程序猿的博客
10-12 2156
使input文本框不可编辑的3种方法： 1、disabled 属性：规定禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例：<input type="text" disabled="disabled" /> 2、readonly 属性：规定输入...
ant-desgin Input 输入框禁止输入
weixin_44911525的博客
11-10 3902
直接加 disabled 就可以了。
Antd 组件 Menu.Item中关于 disabled 的一点使用心得
赵乘风_i
06-05 8253
有一个需求是下拉菜单中有操作，但有些操作是有前提条件的，比如 批量启用 就需要在选择了数据之后。所以设置disabled来控制它操作还是不可操作。 但是会出现一个问题，在<Menu.Item></Menu.Item>中的 不是 string就会导致 disabled不能生效 也就是以下情况 <Menu.Item key="1" disabled={dis}> ...
antd的input输入框超出内容划过显示完整提示
zuo_zuo_blog的博客
04-15 3141
<Tooltip placement="bottom" title={ <span style={{ color: '#979898' }}> {text} </span> } visible={record.popVisible} arrowPointAtCenter..
前端react+Ant Design 给穿梭框Transfer 添加导入导出按钮，难点在于导入数据后怎么赋值给右侧
m0_72154126的博客
06-04 1137
react+Ant Design 给穿梭框Transfer
限制复选框的最大可选数
12-03
函数内部使用了一个循环来遍历所有的复选框。`eval()`函数在这里用来获取具有特定名称的表单元素（即复选框）。如果遍历到的复选框不是当前被点击的，且已经被选中，那么`iNumChecked`计数器就会增加。一旦达到最大...
input为disabled提交后得不到该值的解决方法
10-30
input的字段当为diabled时时无法获取数值得，所以最近不要用这个，我们可以用readonly带替代，即可解决这类问题
ant design vue input框实现动态禁用启用
LaoSiJi2367112677的博客
02-20 2677
ant design vue input框实现动态禁用启用
input 输入框设置disabled属性后，文本在ios端看不到，出现兼容性问题
LiYinghao_的博客
05-29 588
当input输入框设置disabled属性后，输入框内文本在ios端看不到。
Ant Design 中 input 无法输入的问题
ErikChan的博客
02-21 8983
Ant Design 是阿里巴巴开发的一套企业级 UI 设计语言和 React 组件库， 极大地提高了前端开发人员的开发效率。 在我的开发过程中，使用过 ant design 中的 input 组件，遇到了 input 框无法输入的问题。 错误示例 <input className='input_obj' onChange={} value="test"> </input> 在浏览器中打开，在 input 框中输入数据时, 发现内容一致都不变，内容都为 test， 如同被禁止修改
ant-design的Input输入框取消选择后的蓝色背景以及如何取消提示
owo_ovo的博客
08-22 2396
ant-design的Input输入框记录了之前的值，在focus后展示可选提示框，选择后会出现蓝色背景。如何将该背景取消，以及如何不再弹出可选提示框。
<form>表单不允许提交disable属性的input
weixin_30360497的博客
01-12 304
之前做项目一直没碰到这个问题，今天写完程序测试，发现接的值是空的，反反复复调试了半个小时，最后发现input是disable不能被提交 转载于:https://www.cnblogs.com/SyyIt/p/5124869.html...
React开发（249）:react项目理解 ant design form加个扩展样式
歌谣的博客
11-02 363
<Form.Item label="详细地址：" wrapperCol={{ xs: { span: 14 }, sm: { span: 14 } }}> {getFieldDecorator('address', { initialValue: type === 'update' ? activeUpdateData.address : '', rules: [{ me...
input上添加disabled=“true“，点击事件失效处理办法
m0_67624022的博客
05-08 1543
给input标签添加样式style="pointer-events: none;
antdesign修改下拉框、级联选择器默认样式
qq_50215564的博客
09-15 1771
a-select 、a-cascader修改默认样式
vue中disable属性用法
最新发布
10-29
在 Vue 中，`disable` 属性通常用于禁用表单元素（如按钮、输入框、下拉框等），以下是几种常见的使用方式： ### 静态绑定 可以直接在模板中为元素的 `disabled` 属性赋值，以决定元素是否禁用。 ```vue <template> <button disabled="true">禁用按钮</button> <input type="text" disabled="true" placeholder="禁用输入框"> </template> ``` ### 动态绑定 使用 `v-bind` 指令（简写为 `:`）将 `disabled` 属性与 Vue 实例的数据或计算属性绑定，根据数据的变化动态控制元素的禁用状态。 ```vue <template> <button :disabled="isButtonDisabled">点击</button> <input type="text" :disabled="isInputDisabled" placeholder="输入框"> </template> <script> export default { data() { return { isButtonDisabled: false, isInputDisabled: true }; } }; </script> ``` 当 `isButtonDisabled` 为真值或一个空字符串 (即 `<button disabled="">`) 时，按钮会包含这个 `disabled` attribute，而当其为其他假值时 `disabled` attribute 将被忽略[^4]。 ### 绑定方法 可以将 `disabled` 属性绑定到一个方法，根据方法的返回值来决定元素是否禁用。 ```vue <template> <button :disabled="isDisabled('button')">点击</button> </template> <script> export default { data() { return { selectedItems: [], refs: { button: { selected: false } } }; }, methods: { isDisabled(e) { if (this.selectedItems.length >= 5 && this.$refs[e] && this.$refs[e][0].selected !== true) { return true; } else { return false; } } } }; </script> ``` 上述代码中，`isDisabled` 方法根据 `selectedItems` 数组的长度和选项当前的选中状态进行判断，如果选项个数超过指定数目，且选项状态为未被选中，则返回为 `true`，否则返回 `false`[^3]。 ### 在 Vue Antd 中使用 在 `vue antd` 项目中，`disable` 属性可用于实现一些交互限制，如 checkbox 多选框限制选择个数。 ```vue <template> <a-checkbox-group v-model="checkedList" :options="plainOptions" :disabled="isCheckDisabled" /> </template> <script> export default { data() { return { checkedList: [], plainOptions: ['选项1', '选项2', '选项3', '选项4', '选项5'], maxSelectCount: 3 }; }, computed: { isCheckDisabled() { return this.checkedList.length >= this.maxSelectCount; } } }; </script> ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值