用javascript控制readonly属性

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

#javascript #input #button #function #html

本文介绍如何使用JavaScript正确地控制HTML表单中输入框的readonly属性。通过为输入框指定ID并使用getElementById方法来实现对readonly属性的动态设置。

如果我们需要用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>

Javascript设置对象的ReadOnly属性(示例代码)
10-26
总的来说，JavaScript中的ReadOnly属性是控制用户界面元素可编辑性的关键，其设置方式与HTML中的`readonly`属性有所不同，需要使用`readOnly`属性并赋值为`true`。了解并正确使用这个属性，能够帮助我们构建更加灵活...
javascript操作文本框readOnly
10-30
在Web开发中，我们经常需要通过JavaScript对HTML中的元素进行动态控制，其中包括设置或更改文本框（`<input type="text">`）的`readOnly`属性。本文将详细介绍如何使用JavaScript来操作文本框的`readOnly`属性，并...
Javascript设置对象的ReadOnly属性
weixin_34318956的博客
06-04 237
在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 264
貌似很简单，加个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 798
readOnly用来设置字段的只读属性， 但是如果写成readonly就不起作用。区分大小写的。
关于js操作页面组建的readonly属性
知识积淀
07-16 836
<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
Js只读（readOnly）和禁用（disabled）
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-16 5911
只读和禁用属性，其实只要掌握一种，就会第二种，两种方法一样，就是属性变了一下！
[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属性可以帮助实现这种权限控制。 - **计算字段**：只读文本框也可以用于显示由其他表单字段计算得出的结果，如总价或税率计算...
javascript基础常识问答（八）
周五星的博客
04-25 267
readyonly 与 disabled 的区别 readyonly Readonly只针对input(text / password)和textarea有效， 表单元素在使用了readyonly后，当我们将表单以POST或GET的方式提交的话，这个元素的值会被传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button...
html js修改readonly,js控制html元素的readonly属性
weixin_42303107的博客
06-03 3720
html元素假设为只读，那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入。初始时，两个输入框都是只读。点击change按钮后，下面的输入框可以输入了。注意：js代码里的readOnly，O必须大写见代码：function change(){document.getElementById("a2").readOnly= false;}JS控制HTM...
使用JavaScript在input标签中添加readonly属性
qq_43067585的博客
05-30 4625
JavaScript如何将readonly属性添加到input标签？下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法，希望对大家有所帮助。 在JavaScript中可以使用setAttribute()方法将readonly属性添加到表单的input字段中。 setAttribute()方法可将已定义的属性添加到元素，并为其提供定义的值。如果指定的属性已经存在，则正在设置或更改该值。 语法： element.setAttribute( att
ts 类中的修饰符
weixin_42289080的博客
06-06 1476
ts类中的修饰符（public、private、protected、readonly、static）
JavaScript
xjdkxnhcoskxbco的博客
07-29 1316
1、置灰——元素节点.disabled，它的取值是一个布尔值，true表示置灰，false表示可用。2、只读——元素节点.readOnly,它的取值是一个布尔值，true表示只读，false表示可用。区别：当一个表单控件被disabled，那么它的值不能被提交。当一个表单控件被readOnly，那么它的值可以被提交。
下拉框实现只读状态
热门推荐
内心毫无波动甚至还想笑的博客
06-22 1万+
设置为只读状态有几种方式 1.readonly  2.disabled 但是不能把数据提交到后台 以上2种方法只适用于输入框, 下来框只读状态 没有设置为只读的属性，所以只能用js实现了，下边是在网上找的方法 onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.default
js Select下拉框的只读属性设置
唯品衣秀
05-08 4621
因为Select下拉框只支持disabled属性，不支持readOnly属性， 但是用disabled就无法将下拉框中的数据读出来，所以要想办法将select下拉框设置成只读的。 将select下拉框设置成readonly 的两种办法。 第一种： &lt;script&gt;var f=s.selectedIndex&lt;/script&gt; &lt;select name=s ...
javascript readonly
最新发布
12-09
在 JavaScript 中，`readonly` 是表单元素（如 `<input>`、`<textarea>` 等）的一个属性，用于设置元素为只读状态，用户无法对其进行编辑，但可以选中和复制其中的内容。 ### 使用方法 #### 1. 使用原生 JavaScript 控制单个元素的 `readonly` 属性 要使用原生 JavaScript 控制单个元素的 `readonly` 属性，可以通过 `document.getElementById` 方法获取元素，然后直接设置其 `readOnly` 属性（注意 `O` 为大写）。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>Test</title> <script type="text/javascript"> function changeText() { var t = document.getElementById("txtTest"); if (t.readOnly) { t.readOnly = false; t.value = "write able"; } else { t.readOnly = true; t.value = "readonly"; } } </script> </head> <body> <form action="" method="post" name="form1"> <input type="text" value="test" id="txtTest" readonly> <input type="button" value="ChangeProperties" onClick="changeText();"> </form> </body> </html> ``` 在上述代码中，点击按钮时会调用 `changeText` 函数，该函数会根据 `txtTest` 元素当前的 `readOnly` 属性值进行切换，并修改其显示的文本内容 [^4]。 #### 2. 使用原生 JavaScript 控制多个元素的 `readonly` 属性 若要使用原生 JavaScript 控制多个元素的 `readonly` 属性，可以使用 `document.querySelectorAll` 方法选择多个元素，然后遍历这些元素并设置其 `readOnly` 属性。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>Control Multiple Elements</title> <script> function setReadOnly() { var inputs = document.querySelectorAll("input[type='text']"); for (var i = 0; i < inputs.length; i++) { inputs[i].readOnly = true; } } </script> </head> <body> <input type="text" value="Input 1"> <input type="text" value="Input 2"> <input type="button" value="Set Readonly" onclick="setReadOnly()"> </body> </html> ``` #### 3. 使用 jQuery 控制元素的 `readonly` 属性 若要使用 jQuery 控制元素的 `readonly` 属性，可以使用 `prop` 方法来设置或获取元素的属性。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>jQuery Readonly</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("input[type='text']").prop("readonly", true); }); }); </script> </head> <body> <input type="text" value="Input with jQuery"> <button>Set Readonly</button> </body> </html> ``` 在上述代码中，点击按钮时会调用 jQuery 函数，将所有文本输入框设置为只读状态。 ### 作用 - **数据展示**：在表单中展示一些用户不能修改但需要查看的数据，如订单号、创建时间等信息。 - **防止误操作**：在某些情况下，不希望用户修改已有的数据，以避免数据错误或不一致。例如，在提交表单后显示表单内容时，将输入框设置为只读，防止用户再次修改。 ### 注意事项 - 在设置 `readonly` 属性时，需要注意属性名的大小写。在 JavaScript 中，应该使用 `readOnly`（`O` 为大写）。 - 使用 `document.formName.inputName.readonly` 这种方式设置 `readonly` 属性可能无效，建议使用 `document.getElementById` 或其他选择器来获取元素并设置属性 [^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值