Input的readonly 属性与disabled属性

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

#input #javascript #html

本文详细解释了HTML中readonly与disabled属性的区别，包括它们在页面上的表现形式、如何通过JavaScript控制readonly属性，并提供了示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

readonly 
不可编辑，可以获得焦点，背景颜色默认灰色，值的字体颜色默认为灰色，值可以在请求中传递 
disabled 
不可编辑，不可以获得焦点，背景颜色默认灰色，值的字体颜色默认为灰色，值不可以在请求中传递； 

为了使值不可修改，但显示为disabled的样式，且可以在请求中传递，则可以通过采用readonly，修改字体颜色来实现

 

 

JavaScript控制readonly属性：

 

 

浅谈html中input只读属性readonly和disable的区别
09-28
总的来说，`readonly`和`disabled`在HTML表单中提供了不同程度的用户交互限制，选择哪个属性取决于你希望用户如何与表单数据互动以及在提交表单时是否需要包含这些数据。理解它们之间的差异对于构建功能完整且用户...
javascript中input中readonly和disabled区别介绍
10-27
- `disabled`属性适用于所有表单元素，包括`<input>`、`<select>`、`<textarea>`、`<button>`等，它会完全禁用该元素，用户无法与之交互。 - 使用`disabled`的表单元素不仅其值无法被修改，而且在表单提交时，这些...
input标签readonly属性
iteye_2383的博客
03-29 522
定义： readonly属性规定输入字段为只读。 只读字段是不能修改的。不过，用户仍然可以使用tab键切换到该字段，还可以选中或拷贝其文本。   语法： &lt;input readonly="readonly"&gt;     ...
input readonly 属性
Manarola的博客
04-12 1596
<input type="text" readonly>让input标签不可编辑
＜input＞ 标签的 readonly 属性
Jerry Man的博客
08-10 3175
实例 带有两个文本字段和一个提交按钮的 HTML 表单： <form action="form_action.asp" method="get"> Name:<input type="text" name="email" /> Country:<input type="text" name="country" value="China" readonly="readonly" /> <input type="submit" value="Submit"
Javascript: 为input设置readOnly属性
程序设计
04-21 9277
 1、js为设置readOnly属性            var cObj = document.getElementById("content");      cObj.setAttribute("readOnly",true);2、js移除readOnly属性      var cObj = document.getElementById("content");  
html表单属性readonly和disabled的使用方法
09-28
这时，`readonly` 和 `disabled` 这两个属性就显得尤为重要。 1. **只读属性（readonly）** - `readonly` 属性用于设置表单元素为只读状态。这意味着用户可以看到元素中的文本，但不能修改它。当用户尝试改变只读...
jquery批量设置属性readonly和disabled的方法
10-26
本文将详细介绍如何使用jQuery库来批量设置input元素的readonly和disabled属性。 ### 使用jQuery批量设置readonly属性 在HTML中，readonly属性是input元素的一个布尔属性，当这个属性存在时，输入框将变为只读，...
设置input的只读属性
L-BAKE
10-27 1663
<br />input.readOnly = "true";<br /> input.setAttribute("readOnly","true");<br />http://azhp.blog.163.com/blog/static/47736718200871995313811/
.input只读，禁用，必填，提示词（占位符）属性分别是什么？
qq_60504665的博客
06-21 1827
元素有几个常用的属性，包括只读（readonly）、禁用（disabled）、必填（required）和提示词（占位符，placeholder）。属性通常一起使用，以告诉用户哪些字段是必填的，并提供一些指导性的输入建议。属性则用于控制用户的交互行为。
input readonly
魔幻之翼的坚持
09-05 1903
对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.         当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.          这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其
Readonly和Disabled的区别
cindysaj的专栏
12-02 491
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表...
input的 只读 禁用 必填 提示符（占位符）属性分别是什么？
2402_84987408的博客
12-29 604
1、只读：readonly：输入框的内容只能查看，不能修改，可以复制和选中文本，就是不能编辑里面的内容。2、禁用：disabled：禁止输入，用户不能点击，不会有任何点击效果，不会提交到表单中，整体是灰色的。4、提示符（占位符）placeholder：在输入框中显示提示信息，当用户输入时，占位符就会消失。3、必填：required：必填选项输入框，在表单提交时，如果输入框为空，就提示用户填写。
input中的disabled 和 readonly的区别
z16638522031的博客
06-07 1585
经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。2、但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而disabled对于所有的表单元素都有效，
input设置为只读模式
热门推荐
weixin_39784070的博客
11-06 2万+
input框设置为只读依靠两个属性（disabled或readOnly），下面主要说明两者的区别： 1.disabled：作用范围大，所有input类型都有效，但被disabled修饰过的input的值不能随表单提交。 HTML中的表示： JQUERY中的表示：$("#eg1").attr("disabled","disabled"); 2.readOnly：作用范围较小，仅限于text，
HTML <input> 标签的 readonly 属性
lululove19870526的专栏
11-03 1172
HTML 标签的 readonly 属性 实例 带有两个文本字段和一个提交按钮的 HTML 表单：  Name:  Country:readonly="readonly" />   亲自试一试 定义和用法 readonly 属性规定输入字段为只读。 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。 re
input 标签的 disabled 和 readonly 属性
weixin_30802171的博客
01-18 347
首先这两种属性都会使显示出来的文本框不能输入。 　　disabled属性：规定禁用 input 元素。被禁用的 input 元素既不可用，也不可点击和编辑，使用tab键时将会被跳过，用户的所有操作对该输入项都无效。会使文本框变灰。 　　此属性对所有的表单元素都有效，但是表单元素在使用了 disabled 后，当我们将表单以 POST 或 GET 的方式提交的话，这个表单元素值不会被...
javascript 控制 text 的 readonly 属性
dyccsxg的专栏
04-07 1169
      Test                            function changeText(){    var t=document.getElementById("txtTest");    if(t.readOnly){ // 注意 readOnly 的 O为大写      t.readOnly=false;      t.value="write able";    
input readonly只读属性
最新发布
03-13
<think>嗯，用户想了解HTML input元素的readonly属性的作用和用法。首先，我需要回忆一下readonly属性的基本概念。我记得readonly属性用于让输入字段变为只读，用户不能修改其内容，但数据仍然会随表单提交。这和disabled属性不同，后者会禁用输入字段，数据不会提交。 接下来，我得考虑用户可能需要具体的例子。应该给出HTML中使用readonly的不同方式，比如直接在标签内添加，或者用JavaScript动态设置。同时，要对比readonly和disabled的区别，避免混淆。 还要注意用户提到的引用来源，引用1和引用2提到了两种设置方法：直接属性和setAttribute()方法。引用3提到number类型的输入元素，可能需要特别说明readonly在不同输入类型中的应用是否一致。 用户可能需要知道何时使用readonly，比如表单中有需要展示但不可修改的数据，如订单号或用户名。这时候用readonly既保持数据显示，又防止用户改动。 另外，要确保示例代码正确，比如在HTML中用readonly属性不需要赋值，只要存在即可。而在JavaScript中，可能需要用setAttribute("readonly", "readonly")或者直接设置readonly属性为true。 还要提醒用户，虽然输入字段是只读的，但样式可能需要调整，比如背景色变灰，以提示用户不可编辑。这部分可以通过CSS来实现，但用户没问，可能作为额外信息简要提及。 最后，生成相关问题要考虑用户可能想深入的点，比如如何动态切换只读状态，不同浏览器的兼容性，或者与类似属性的对比。这样能帮助用户进一步学习。</think>### HTML input元素readonly属性的作用与用法 #### 一、作用 `readonly`属性用于使表单输入字段（如`<input>`或`<textarea>`）的内容不可编辑，但允许其值随表单提交[^1]。与`disabled`属性的区别在于： 1. `readonly`字段仍可聚焦，且数据会提交； 2. `disabled`字段无法聚焦，且数据不会提交。 #### 二、使用方法 1. **HTML直接设置** 在标签内添加`readonly`属性（无需赋值）： ```html <input type="text" value="不可修改内容" readonly> <input type="number" value="100" readonly> <!-- 适用于数字输入[^3] --> ``` 2. **JavaScript动态设置** 通过`setAttribute()`方法或直接属性赋值： ```javascript // 方式1 document.getElementById("input1").setAttribute("readonly", "readonly"); // 方式2 document.getElementById("input2").readOnly = true; ``` #### 三、示例场景 1. **展示固定信息** ```html <form> 用户名：<input type="text" value="user123" readonly> 订单号：<input type="number" value="20231001" readonly> </form> ``` 2. **动态控制编辑权限** ```javascript function toggleEdit() { const input = document.getElementById("address"); input.readOnly = !input.readOnly; // 切换只读状态 } ``` #### 四、注意事项 - `readonly`对`type="hidden"`无效 - 需配合CSS样式（如`background-color: #eee;`）提升用户体验 - 可通过JavaScript的`.removeAttribute("readonly")`移除属性 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值