前端：Vue readadyonly 代替 disabled

已于 2023-05-15 20:40:56 修改
阅读量213 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-05-15 20:39:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/classic0608/article/details/130692198
版权
文章介绍了在前端开发中如何使用HTML的disabled和readonly属性来限制用户对input输入框的交互。disabled属性可以完全禁止输入，而readonly则保持输入框内容只读，不显示灰色背景，以保持界面一致性。作者倾向于使用readonly属性。
摘要由CSDN通过智能技术生成

需求：input输入框，禁止用户通过键盘输入，只能通过help按钮等选择输入时

<div>
 <el-input v-model="editForm.edkzbm" disabled></el-input>

 <el-input v-model="editForm.edkzbm" readonly></el-input>
</div>

disabled效果：

readyonly效果：

结论：顾名思义，disabled=禁止输入，readonly=只读。   后者不会出现灰框，个人认为后者保持界面一致性更好一些

Rui Heng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
禁用的来源disabled以及只读readonly，Vue给icon加禁用
weixin_46037781的博客
08-16 2827
一、禁用disabled来源 众所周知，在element ui的button可以添加disabled参数来让按钮不能点击且鼠标会有一个禁用标符。 disabled表示禁用input元素，不可编辑，不可复制，不可选择，不能接收焦点,，后台不能接收到传值. <input type="button" disabled="disabled" /> 二、只读readonly readonly表示此域的值不可修改，仅可与 type=“text” 配合使用，可复制，可选择,可以接收焦点，后台能接
readonly 和 disable 的总结
frame的专栏
07-29 566
今天在整理一个EasyUI框架的时候，需要用到设置输入框的disable属性。但是由于EasyUI自身的原因，导致disable属性无法生效，使用readonly就能够正常显示，原因是由于引用的插件validatebox.js导致输入框重新加载时取消了disable属性。 在网上查阅资料发现readonly 和 disable虽然都是禁止编辑，但是也有一些细微的差别。 disabled对于所有
vue3 readonly使用详情
前端-小鑫
07-27 2995
readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应 如强制修改 控制台将会报错警告 代码使用如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
【el-input输入框】之“readonly“与“disabled“的区别
weixin_45438028的博客
04-11 1653
【el-input输入框】之"readonly"与"disabled"的区别
css不可修改,css怎么设置text不可编辑
weixin_31668621的博客
08-04 1050
css设置text不可编辑的方法：1、通过“οnfοcus=this.blur()”方法设置text不可编辑；2、使用readonly属性设置输入字段为只读；3、使用disabled属性设置禁用input元素即可。本教程操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。推荐：css视频教程设置text不可编辑的方法方法1： οnfοcus=this.b...
外卖点餐系统，后端：springboot+mybatis+mybatis-plus 前端：vue+elmen
05-08
后端使用Spring Boot和MyBatis作为开发框架，而前端使用Vue和ElementUI作为开发工具。 后端开发框架 后端使用Spring Boot作为开发框架，Spring Boot是一个轻量级的框架，易于学习和使用，可以快速搭建项目。它提供...
毕设项目商品大数据实时推荐系统前端：Vue + TypeScript + ElementUI，后端 Spring + Spark
10-23
前端：Vue + TypeScript + ElementUI，后端 Spring + Spark 毕设项目：商品大数据实时推荐系统。前端：Vue + TypeScript + ElementUI，后端 Spring + Spark 毕设项目：商品大数据实时推荐系统。前端：Vue + ...
毕设项目：商品大数据实时推荐系统 前端：Vue + TypeScript + ElementUI，后端Spring+Spark
07-11
前端：Vue + TypeScript + ElementUI，后端 Spring + Spark **前端**使用 Vue + TypeScript + ElementUI 构建，build 的时候自动部署到后端业务工程的 webapps/static 目录下，随 Tomcat 一同启动 **后端**又分为...
前端：Vue高频面试题汇总
09-25
前端高频面试题，适合初中高级前端工程师，涵盖了多种题型
高校图书馆管理系统源码 前端：vue + element-ui + axios 后端：Springboot 数据库：mysql
最新发布
01-05
前端：vue + element-ui + axios 后端：Springboot 数据库：mysql 项目所包含的功能： 登录（包含滑块验证） 首页展示：echarts 折线堆叠图（展示借书及还书记录） 学员管理：添加学员、编辑学员、删除学员、学员...
Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式
qq_39388660的博客
09-09 6109
Element-ui是一个非常好的UI设计模块，它提供给我们很多好看的按钮样式，非常适用于快速搭建UI，下面说说如果使用了element-ui之后，要更改它默认的el-Input样式应该怎么操作。 使用调试工具找出他的样式默认表，具体操作如下： 从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色： <style > .el-input__i...
vue显示框设置为只读的两种方法
菜鸟出击！
06-29 1万+
vue显示框设置为只读的两种方法
Vue3 readonly
且听风吟的博客
05-05 2511
readonly 接收一个 ref 或者 reactive 包装对象，返回一个只读的响应式对象。
关于elemen-ui的el-inputl框只读或禁用
热门推荐
qq_43791339的博客
02-20 2万+
只读 在data里定义：readonly: true, 然后在el-input框里加上readonly就可以了。 禁用 在data里定义：edit: true, 然后在el-input框里加上：:disabled="edit"就可以了 参考地址请点击 ...
html input readonly 和 disable的区别
weixin_33853827的博客
03-30 506
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会...
vue中如何动态添加readonly属性
weixin_30477797的博客
03-26 1911
<inpu :readonly="status ? false : 'readonly'"> status 为 false时添加 readonly 属性，只读，false不要加引号！ 转载于:https://www.cnblogs.com/ybixian/p/10598493.html
vue disabled的使用
酸奶不够酸的博客
06-21 9353
<button type="button" :disabled="disabled"></button> data:{ disabled:false//设为true即可禁止按钮点击 }
修改readonly和disabled的样式
高振的博客
09-22 4158
#endDate:read-only{     cursor:pointer; } #endDate:disabled{     cursor:not-allowed; }
Vue中disabled是否可以实现只读功能
07-16
在Vue中，`disabled`属性通常用于禁用表单元素，阻止用户对其进行编辑和交互。虽然`disabled`属性可以禁用输入框，但它并不能直接实现只读的功能，因为禁用状态下输入框的值无法通过表单提交。 要实现只读功能，可以使用`readonly`属性。在Vue中，可以通过动态绑定属性的方式将`readonly`属性设置为`true`或`false`。这样，根据是否为只读状态，输入框将会被禁止编辑或者允许编辑。 以下是一个使用Vue实现只读功能的示例： ```html <template> <div> <input type="text" v-model="value" :readonly="isReadOnly"> <button @click="toggleReadOnly">Toggle Readonly</button> </div> </template> <script> export default { data() { return { value: '只读内容', isReadOnly: true } }, methods: { toggleReadOnly() { this.isReadOnly = !this.isReadOnly; } } } </script> ``` 在上述示例中，使用了一个按钮来切换只读状态。点击按钮时，`toggleReadOnly`方法会将`isReadOnly`的值取反，从而切换输入框的只读状态。当`isReadOnly`为`true`时，输入框为只读状态；当`isReadOnly`为`false`时，输入框可编辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值