input 的disabled 和readonly

最新推荐文章于 2025-07-26 11:04:40 发布
原创 最新推荐文章于 2025-07-26 11:04:40 发布 · 714 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在数据库更新操作中使用disabled属性阻止主键修改的现象，并对比了disabled与readonly的区别：前者完全禁止交互，后者仅使字段变为只读状态。

今天做了一个小东西，在update数据的时候想让数据库的主键无法被更改，所以就想到了disabled属性。那就使用呗，二话不说disable就写上去了，上了之后就是无法更新数据，编辑器也不报错，太可拍了。。。最后发现主键就是无法获得。

查了点资料知道原来disable和readonly是有那么点区别的。

disable是无法完成交互的，而readolly就可以，只读嘛，从名字就能看出来。

java http post和get请求回调
04-10
非常使用的post和get请求，带回调
javascript中input中readonly和disabled区别介绍
11-30
总结来说，`readonly`和`disabled`都是为了限制用户对表单元素的修改，但`readonly`只影响编辑，不影响提交，而`disabled`则全面禁止交互且不包含在提交数据内。开发者应根据具体需求来选择使用哪一个属性，以实现...
html input readonly 和 disable的区别
u010090557的博客
07-08 670
  html input readonly 和 disable的区别      Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后...
vue 将整个表单设置为只读_elementUI 设置input的只读或禁用的方法
weixin_39531178的博客
12-19 1万+
只读：readonly在data里定义：readonly: true,然后在input框里加上readonly就可以了。禁用：disabled在data里定义：edit: true,然后在input框里加上：:disabled="edit"就可以了PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性通过 disabl...
input属性disabled和readonly的区别
每天学习一点点
04-15 1330
1.disabled和readonly使用实例 disabled写法：<input type="text" name="aaa" value="xxx" disabled /> readonly写法：<input type="text" name="bbb" value="xxx" readonly /> 2.两种写法的相同点： 都会使文本框变成只读，不...
HTML Input disabled和readonly对比
allway2的博客
09-25 147
如果出于某种原因您_真的_不希望将特定字段的值包含在表单提交请求中，您可能需要查看服务器端表单处理。恶意用户可能会覆盖表单输入的。效果——事实上，从用户的角度来看，它们看起来是一样的。在这两种情况下，用户看到的是一个略微“变灰”的字段，无法点击或编辑。属性并发送他们喜欢的任何表单数据。实际上，任何元素都是如此——永远不要忘记考虑服务器端表单验证和清理。但是，它们是不同的，使用错误的可能会导致问题。将字段的值发送到服务器。则将值发送到服务器。
input的disabled 属性和 readonly 属性的区别是什么？
tianxianghuiwei的博客
06-12 512
然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。：当一个输入元素被设置为只读时，用户不能修改其值，但它仍然会随表单一起提交。：当一个输入元素被禁用时，它不能与用户交互，并且其值不会随表单一起提交。此外，禁用的元素通常以不同的样式显示，以指示它们是非活动的。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
input中disabled和readonly
qq_45401346的博客
02-01 747
1.两种情况的写法，没什么太大的区别，两个属性而已 disabled写法： <input type="text" name="eee" value="ccc" disabled="true"/> readonly写法： <input type="text" name="kkk" value="xxx" readonly="true"/> 两种写法的相同点： 都...
谈谈你对input元素中readonly和disabled属性的理解
likuoelie的博客
07-26 1159
readonly 属性该属性使input字段变为只读状态，用户无法通过直接输入修改其值。字段仍然可以接收焦点（例如通过 Tab 键导航），并且在表单提交时，其值会被包含在表单数据中。适用于需要显示但不允许用户编辑的数据，例如预填充的用户名、动态计算的结果（如购物车总价）。disabled 属性该属性完全禁用input字段，用户无法编辑、选择或与之交互。禁用字段无法接收焦点，且在表单提交时，其值不会被发送到服务器。
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...
怎样通过disabled和readonly将input设置为只读效果.docx
11-23
Disabled 和 Readonly 是两种常见的方法来实现 Input 只读效果，它们均可以使 Input 变为不可编辑状态，但它们之间存在着重要的区别。 Disabled 方法 Disabled 属性用于指定 Input 元素是否可用。当 Input 元素...
disabled与readonly的作用及区别介绍
09-28
在网页开发中，`disabled` 和 `readonly` 是两个非常重要的属性，它们都用于限制用户对HTML表单元素的交互，但它们之间存在着显著的区别。接下来我们将深入探讨这两个属性的作用和差异。 首先，`readonly` 属性主要...
input中的disabled 和 readonly的区别
z16638522031的博客
06-07 1686
经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。2、但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而disabled对于所有的表单元素都有效，
input属性disabled和readonly的区别（超详细的~~~~）
热门推荐
白小纯的博客
10-16 2万+
1.两种情况的写法，没什么太大的区别，两个属性而已 disabled写法：&lt;input type="text" name="aaa" value="xxx" disabled="true"/&gt; readonly写法：  &lt;input type="text" name="bbb" value="xxx" readonly=&
Readonly和Disabled的区别
cindysaj的专栏
12-02 504
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表...
input标签为readonly
最新发布
12-06
<think>我们正在讨论HTML中input标签的readonly属性。根据引用内容，readonly属性用于设置输入框为只读状态，用户无法修改其中的内容。 引用[4]给出了一个简单的例子：<input type="text" value="只读状态" readonly="readonly" /> 引用[3]展示了如何使用JavaScript动态添加readonly属性：document.getElementById('Input').readOnly = true; 我将从以下几个方面来介绍readonly属性： 1. 使用方法（静态设置和动态设置） 2. 效果（用户界面表现） 3. 注意事项（与disabled属性的区别、表单提交等） 然后，根据要求生成相关问题。 </think> ### HTML中input标签的readonly属性详解 #### 一、基本概念与效果 `readonly`属性用于将输入字段设置为**只读状态**，用户可以看到输入框内容但无法修改： ```html <!-- 基础用法 --> <input type="text" value="初始内容" readonly> ``` **效果表现**： - ✅ 文本可见但不可编辑 - ✅ 支持键盘Tab键切换焦点 - ✅ 表单提交时会包含该字段的值（与`disabled`关键区别） - ❌ 无法通过用户交互修改内容 #### 二、使用方法 1. **静态设置**（HTML直接声明）： ```html <input type="text" value="固定值" readonly> <input type="email" readonly="readonly"> <!-- XHTML风格 --> ``` 2. **动态设置**（JavaScript操作）： ```javascript // 添加只读属性 document.getElementById('myInput').readOnly = true; // 移除只读属性 document.querySelector('input').removeAttribute('readonly'); ``` 3. **框架示例**（Vue.js）： ```html <input :readonly="isLocked"> <!-- 根据isLocked变量动态切换 --> ``` #### 三、注意事项 1. **与`disabled`的区别**： | 特性 | `readonly` | `disabled` | |--------------|--------------------|--------------------| | 值是否可修改 | 否 | 否 | | 值是否提交 | 是 | 否 | | 焦点可获取 | 是 | 否 | | 视觉样式 | 正常（可自定义） | 默认灰色 | 2. **特殊类型支持**： - ✅ 支持：`text`, `password`, `email`, `number`, `date`等文本类输入 - ❌ 不支持：`checkbox`, `radio`, `button`（无意义） 3. **样式自定义**： ```css input[readonly] { background-color: #f0f0f0; border: 1px dashed #999; } ``` #### 四、实际应用场景 1. 显示数据库ID等不可修改的关键数据 2. 预填充表单的计算结果（如价格总计） 3. 分步表单中展示上一步已确认的信息 4. 配合JavaScript实现条件锁定逻辑[^3][^4] #### 五、常见问题解决 - **问题**：移动端键盘仍弹出？ **方案**：添加`onfocus="this.blur()"`阻止焦点 - **问题**：需要临时解锁？ **方案**：通过JavaScript动态移除属性： ```javascript document.getElementById('tempInput').readOnly = false; ``` > 关键提示：若需完全阻止用户交互（包括选择文本），需结合`disabled`属性使用，但要注意表单提交时该字段会被忽略[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值