用javascript控制readonly属性

最新推荐文章于 2024-07-29 14:31:33 发布
最新推荐文章于 2024-07-29 14:31:33 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Servlet & Jsp 文章标签： javascript input button function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vannly/article/details/821649
本文介绍如何使用JavaScript正确地控制HTML表单中输入框的readonly属性。通过为输入框指定ID并使用getElementById方法来实现对readonly属性的动态设置。

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

如果我们需要用javascript控制/设置表单的readonly属性，如果使用document.myform.mytext.readony=true/false 是没有任何作用的，如果控制的话，可以将mytext加一个ID然后用ID控制readonly 属性，代码如下
<html>
<script>
function ee()
{

document.getElementById("MyID").readOnly=true;//-->正确
// document.myform.ff.readonly=false; ---->错误
}
</script>
<body>
<form name="myform">
<input id="MyID" type="text" name="mytext" value="">
<input type="button" value="mybutton" onclick="ee()">
</form>
</body>
</html>

js Select下拉框的只读属性设置
唯品衣秀
05-08 4595
因为Select下拉框只支持disabled属性，不支持readOnly属性， 但是用disabled就无法将下拉框中的数据读出来，所以要想办法将select下拉框设置成只读的。 将select下拉框设置成readonly 的两种办法。 第一种： &lt;script&gt;var f=s.selectedIndex&lt;/script&gt; &lt;select name=s ...
Javascript设置对象的ReadOnly属性
weixin_34318956的博客
06-04 225
在JS中ReadOnly属性比较奇怪，直接创建一个对象，给该对象赋值readonly属性不能够向HTML中一样使用下面的方式： var x=document.createElement("input");x.type="text";x.value="ttttt";x.id="xy";x.readonly="readonly"; 这样创建的对象并不是只读的。正确的写法是: var x=docu...
IE9 input js控制readonly
07-02 239
貌似很简单，加个readonly，然后移掉就ok了？ chrome，firefox都ok，就ie不ok 不ok在哪儿呢？ 每次移掉readonly属性后，还需要鼠标再次点击一下，才能够输入，用js去手动调click事件也不行 有人说要这样，因为这是IE的bug ed.removeAttribute('readonly');//only needed the first time ed.readOnly = false; 嗯，好像是这样，因为在stackoverflow也有人同样说这是IE的b
javascript中的readOnly
liuhualiang的专栏
07-30 785
readOnly用来设置字段的只读属性， 但是如果写成readonly就不起作用。区分大小写的。
关于js操作页面组建的readonly属性
知识积淀
07-16 800
<br />今天使用js来操作text组建的readonly属性,写成了下面这样的代码:<br />document.getElementById("name").readonly=true;<br />or<br />document.getElementById("name").readonly="readonly";<br />结果都不行,最后在网上查了以下,发现readonly写错了,正确的写法应该是:<br />document.getElementById("name").readOnly=tr
Javascript设置对象的ReadOnly属性(示例代码)
10-26
总的来说，JavaScript中的ReadOnly属性是控制用户界面元素可编辑性的关键，其设置方式与HTML中的`readonly`属性有所不同，需要使用`readOnly`属性并赋值为`true`。了解并正确使用这个属性，能够帮助我们构建更加灵活...
javascript操作文本框readOnly
10-30
在Web开发中，我们经常需要通过JavaScript对HTML中的元素进行动态控制，其中包括设置或更改文本框（`<input type="text">`）的`readOnly`属性。本文将详细介绍如何使用JavaScript来操作文本框的`readOnly`属性，并...
[removed]为input设置readOnly属性(示例讲解)
10-26
为了在Javascript中动态设置或移除input元素的readonly属性，可以使用setAttribute和removeAttribute方法。 首先，让我们明确一下什么是只读（readonly）。在HTML中，设置input元素的readonly属性为"readonly"时，...
用js一次改变多个input的readonly属性值的方法
10-25
总结来说，文档内容中展示的是如何利用JavaScript来动态控制页面上的`input`元素的`readonly`属性。通过一个简单的函数和HTML按钮的结合使用，实现了对多个`input`元素的统一操作，这对于提高页面交互性和用户体验...
文本框的ViewState和Readonly属性
04-01
- **权限控制**：在多用户环境中，某些用户可能只有查看权限，而不能修改数据，readonly属性可以帮助实现这种权限控制。 - **计算字段**：只读文本框也可以用于显示由其他表单字段计算得出的结果，如总价或税率计算...
vue-better-calendar:vuejs的日历组件，提供四种日期选择模式（范围选择，多项选择，签入，单选）
05-28
vue-better-calendar A calendar component for vuejs. 关于vue-better-calendar vue-better-calendar是一个基于vue的日期选择插件，它提供了四种日期选择模式（范围选择，多选，签到，单选） 在线示例 安装 使用npm安装 npm install --save vue-better-calendar ES6方式导入 import VueBetterCalendar from 'vue-better-calendar' Vue.use(VueBetterCalendar) 在组件中引入 <vue></vue> 直接连入页面使用 <script src="https://unpkg.com/vue@2.5.16/dist/vue.
ts 类中的修饰符
weixin_42289080的博客
06-06 1376
ts类中的修饰符（public、private、protected、readonly、static）
JavaScript
xjdkxnhcoskxbco的博客
07-29 1255
1、置灰——元素节点.disabled，它的取值是一个布尔值，true表示置灰，false表示可用。2、只读——元素节点.readOnly,它的取值是一个布尔值，true表示只读，false表示可用。区别：当一个表单控件被disabled，那么它的值不能被提交。当一个表单控件被readOnly，那么它的值可以被提交。
Javascript:为input设置readOnly属性
qq_19396231的博客
08-19 754
 本篇文章主要是对Javascript中为input设置readOnly属性的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助 1、js为&lt;input&gt;设置readOnly属性         &lt;textarea name="content" id="content" cols="27" rows="6"&gt;&lt;/textarea&
javascript readonly disabled
sun810的专栏
08-05 421
如：1、                          ***           radio、checkbox元素有checked属性(可为"")。 2、var texts = document.getElementsByName("text1");     texts[0].readOnly = true or false;     
js中disabled和readonly的区别
mischen520的博客
07-08 4997
js中disabled和readonly的区别 Title //disabled 灰掉 //disabled 写在标签里 可以直接写disabled 也可以写 disabled="disabled" //在js中 操作disabled 设置true 或 false //form提
JavaScript控制readonly属性无效
hellolongbin[一个人]的专栏
03-25 2624
readonly属性很BT的区分大小写,应写成readOnly如:document.all.htyy.readOnly=true;
html的readonly属性
最新发布
07-22
<think>首先，用户的问题是：“我想了解HTML中readonly属性的用法 请问HTML readonly属性如何使用”。这涉及到HTML的readonly属性。 根据系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰，帮助用户逐步解决问题，尽量保证回答真实可靠。 用户提到了参考站内引用，但引用内容是关于JavaScript修改readonly属性的，以及ExtJS中readonly和disabled的区别。用户的问题直接是关于HTML中readonly属性的用法，所以我需要基于HTML标准来回答。 关键点： - readonly属性用于表单元素，如<input>、<textarea>等，使其只读，用户不能编辑内容。 - 与disabled属性不同，readonly的元素仍然可以被选中、复制，并且其值在表单提交时会被包含。 - disabled的元素则不能交互，值也不会被提交。 在回答中，我需要： 1. 解释readonly属性的基本用法。 2. 提供HTML代码示例。 3. 对比readonly和disabled。 4. 添加引用标识，如果引用外部知识。 5. 生成相关问题。 结构化回答： - 先介绍readonly属性。 - 给出示例代码。 - 解释关键点。 - 生成相关问题。 引用部分：用户提供了引用[1]和[2]，但它们是关于JavaScript和ExtJS的，不是直接关于HTML的。我应该专注于HTML，但可以简要提到JavaScript如何修改它，以连接引用。 引用[1]提到用JS修改readonly属性，引用[2]讨论readonly和disabled的区别。在回答中，我可以自然地融入这些。 最终回答应包含： - 什么是readonly属性。 - 如何使用。 - 与disabled的区别。 - 示例。 - 相关问题。</think>### HTML readonly属性的用法 在HTML中，`readonly`属性用于表单元素（如输入框、文本域等），使其内容不可编辑，但用户仍可选中、复制或通过表单提交该值。这与`disabled`属性不同：`disabled`元素完全不可交互且值不会提交，而`readonly`元素的值会在表单提交时包含在请求中。下面我将逐步解释其用法和注意事项。 #### 1. **基本语法和用法** - `readonly`是一个布尔属性，添加到表单元素的标签中。例如： - 对于`<input>`元素： ```html <input type="text" name="username" value="admin" readonly> ``` - 这里，输入框显示"admin"，但用户无法修改。 - 对于`<textarea>`元素： ```html <textarea name="description" readonly>这是只读文本</textarea> ``` - 文本域内容不可编辑，但可选中复制。 - 注意：`readonly`只适用于可编辑元素，如`<input type="text">`、`<textarea>`、`<input type="email">`等。它不适用于按钮或非表单元素。 #### 2. **关键特性** - **只读但可提交**：用户不能编辑内容，但元素的值会被包含在表单提交中（例如，通过`<form method="POST">`）。这与`disabled`属性不同——`disabled`元素的值会被忽略，不提交[^2]。 - **交互性**：用户可选中、复制或聚焦到`readonly`元素，但不能修改。而`disabled`元素完全不可聚焦或交互。 - **样式影响**：默认情况下，浏览器会以灰色显示`readonly`元素（类似`disabled`），但您可以通过CSS自定义样式： ```html <style> input[readonly] { background-color: #f0f0f0; /* 浅灰色背景 */ border: 1px solid #ccc; } </style> ``` #### 3. **与`disabled`属性的对比** | 特性 | `readonly` | `disabled` | |------|------------|------------| | 用户可编辑 | 否 | 否 | | 值是否提交 | 是 | 否 | | 元素可聚焦 | 是 | 否 | | 可选中/复制 | 是 | 否 | | 适用场景 | 显示固定信息（如用户名、ID） | 禁用整个功能（如按钮） | - 示例：如果表单中有用户ID字段，应使用`readonly`确保值提交；如果是一个临时禁用的按钮，则用`disabled`[^2]。 #### 4. **动态修改（使用JavaScript）** - 您可以通过JavaScript动态添加或移除`readonly`属性，实现交互控制。例如： ```html <input type="text" id="dateInput" value="2023-01-01"> <button onclick="toggleReadOnly()">切换只读</button> <script> function toggleReadOnly() { const input = document.getElementById("dateInput"); input.readOnly = !input.readOnly; // 切换只读状态 } </script> ``` - 点击按钮时，输入框在可编辑和只读之间切换。这在处理日历控件等场景中常见，例如12306网站的日期选择器会动态设置`readonly`[^1]。 #### 5. **注意事项** - **安全性和验证**：`readonly`元素的值在客户端不可修改，但恶意用户可能通过开发者工具修改HTML。因此，服务器端仍需验证数据。 - **兼容性**：所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持`readonly`。 - **表单提交**：确保`readonly`元素在`<form>`内，否则值不会提交。 通过合理使用`readonly`，您可以提升用户体验，同时保护关键数据不被意外修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值