【转】JS动态控制元素的readonly属性

最新推荐文章于 2023-05-16 19:12:13 发布
原创 最新推荐文章于 2023-05-16 19:12:13 发布 · 582 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在HTML中使用readonly属性限制输入框的输入，并强调了在JavaScript中使用该属性时应注意的大小写问题。

在HTML中可以设置输入框属性readonly来控制不能输入，但是如果在JS下需要注意，要写成readOnly，注意大小写(readOnly=true/false).

Javascript设置对象的ReadOnly属性(示例代码)
10-26
总的来说，JavaScript中的ReadOnly属性是控制用户界面元素可编辑性的关键，其设置方式与HTML中的`readonly`属性有所不同，需要使用`readOnly`属性并赋值为`true`。了解并正确使用这个属性，能够帮助我们构建更加灵活...
用js一次改变多个input的readonly属性值的方法
10-25
总结来说，文档内容中展示的是如何利用JavaScript来动态控制页面上的`input`元素的`readonly`属性。通过一个简单的函数和HTML按钮的结合使用，实现了对多个`input`元素的统一操作，这对于提高页面交互性和用户体验...
js控制html元素的readonly属性
H405282968的博客
07-08 462
html元素假设为只读，那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入。 初始时，两个输入框都是只读。点击change按钮后，下面的输入框可以输入了。 注意：js代码里的readOnly，O必须大写 见代码： 1 <html> 2 <head> 3 <script langu...
js设置元素readonly属性注意事项
weixin_30343157的博客
06-24 323
注意大小写，应该为：obj.readOnly = true; 转载于:https://www.cnblogs.com/orange-tree/p/3151876.html
js 动态控制 input 框 的只读属性
雨果的博客
05-09 3042
input 框的只读属性： readonly在页面中直接添加为只读时，可在input中直接添加 readonly=”readonly”，但是如果想通过点击按钮来改变的话，需要通过js（或jquery）来实现。
js 动态控制 input 框 的只读属性
热门推荐
katherine的专栏
09-09 7万+
input 框的只读属性：  readonly 在页面中直接tianjia
用javascript控制readonly属性
watering17inworking的专栏
05-21 726
 如果我们需要用javascript控制/设置表单的readonly属性，如果使用document.myform.mytext.readony=true/false 是没有任何作用的，如果控制的话，可以将mytext加一个ID然后用ID控制readonly 属性，代码如下 function ee() { document.getElementById("MyID").readOnly=
浅析js设置控件的readonly与enabled属性问题
10-26
在JavaScript中，控制HTML表单控件的属性是一项常见的操作，而`readonly`和`disabled`属性是其中经常被提及的两个属性。`readonly`属性用于设置一个控件为只读状态，意味着用户不能修改控件的值，但该控件仍然会向...
[removed]为input设置readOnly属性(示例讲解)
10-26
为了在Javascript中动态设置或移除input元素的readonly属性，可以使用setAttribute和removeAttribute方法。 首先，让我们明确一下什么是只读（readonly）。在HTML中，设置input元素的readonly属性为"readonly"时，...
JS中如何设置readOnly的值
10-26
在JavaScript编程中，我们经常会遇到需要控制网页元素状态的情况，尤其对于表单控件而言，控制其是否可编辑是一个常见的需求。ReadOnly属性可以让我们将文本输入框设置为只读，这意味着用户无法对输入框中的内容进行...
Js只读（readOnly）和禁用（disabled）
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-16 5897
只读和禁用属性，其实只要掌握一种，就会第二种，两种方法一样，就是属性变了一下！
js DOM ( 文档对象模型 ) ： 获取节点、节点只读属性
sleepy_girl的博客
07-25 559
DOM：Document Object model 文档对象模型 html元素标签六大公共属性：class、id、title、name、style、data-* 获取节点（元素）: 通过 id 获取：var user= document.getElementById('user'); //若获取得到返回一个原生DOM元素，找不到则返回null 通过class 类名获取： ...
js添加readonly和disabled属性
qq_39822451的博客
06-06 2646
//js添加readonly和disabled属性 $("input[name='yourName']").attr('readonly','true'); $('#yourName')[0].disabled = true;
autojs脚本代码大全_脚本化部署 Web 项目，让你的部署更加简单、轻松、优雅
weixin_39628105的博客
11-24 1585
写在前面的话最近疫情比较严重，大家面临了长期呆在家中，很多人已经玩无可玩，刷无可刷的地步。此时不正是最好的充电时刻吗？什么是脚本？我们先看看百度百科怎么说：脚本(Script)是一种批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等。—— 百度百科我们可以看到这些关键词：批处理文件的延伸，纯文本，实现一定...
Vue===input输入框，动态修改readonly，控制是否只读
m0_65041486的博客
03-04 2913
Vue===input输入框，动态修改readonly，控制是否只读。
有关S2SH中乱码的简单解释
iteye_20539的博客
09-18 268
乱码其实是S2SH开发过程中经常遇到而又不太注意的东西，往往这一次解决了下次不知道什么情况下又会出现 记录一下自己最近一次解决乱码的过程，仅供参考 程序很简单，假设一个用户注册页面提交，后台struts的UserAction接收参数，再调用Dao的方法存储。整个S2SH工程配置均无问题，数据库mysql数据库查询数据发现中文乱码。 很简单的程序 1.register.jsp注册页面 ...
如何用jquery动态改变输入框的readonly属性
hugaozhuang的专栏
11-19 2万+
$('input[name=username]').attr("readonly","readonly")//将input元素设置为readonly $('input[name=username]').removeAttr("readonly");//去除input元素的readonly属性
jQuery动态增加/删除元素的readonly属性
一勺陈不满
01-09 1万+
使用attr方法设置或返回被选元素的属性值 $(selector).attr(attribute,value) attribute：属性的名称 value：属性的值 $("#input").attr("readonly","readonly") // 将元素动态添加上readonly属性 $("#input").removeAttr("readonly") //动态删除元素的input属性 ...
js控制元素的只读属性
最新发布
11-21
在JavaScript中，控制元素只读属性可从不同角度实现，以下是不同场景下的方法： ### 普通 HTML 元素的只读属性设置 对于普通 HTML 元素，如 `<input>` 标签，可以直接通过设置其 `readOnly` 属性来实现只读。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <input type="text" id="myInput" value="这是只读输入框"> <script> const inputElement = document.getElementById('myInput'); inputElement.readOnly = true; </script> </body> </html> ``` 在上述代码中，获取到 `input` 元素后，将其 `readOnly` 属性设置为 `true`，该输入框就变为只读状态，用户无法对其内容进行修改。 ### 对象属性的只读设置 如果要设置对象属性为只读，可使用 `Object.defineProperty()` 方法。示例代码如下： ```javascript const obj = {}; Object.defineProperty(obj, 'readOnlyProp', { value: '这是只读属性', writable: false, configurable: false, enumerable: true }); console.log(obj.readOnlyProp); obj.readOnlyProp = '尝试修改'; console.log(obj.readOnlyProp); ``` 在这段代码中，通过 `Object.defineProperty()` 方法将 `obj` 对象的 `readOnlyProp` 属性设置为只读，`writable: false` 表示该属性不可写，后续尝试修改该属性值不会生效。 ### 结合 Proxy 实现更严格的只读控制 结合 `Object.defineProperty()`、`Proxy` 和 `Object.freeze()` 可以实现最严格的只读属性控制。示例代码如下： ```javascript const obj = {}; Object.defineProperty(obj, 'readOnlyProp', { value: 'This is read-only', writable: false, configurable: false, enumerable: true }); const readOnlyProxy = new Proxy(obj, { set() { console.warn('readOnlyProp is read-only and cannot be modified.'); return false; } }); console.log(readOnlyProxy.readOnlyProp); readOnlyProxy.readOnlyProp = 'New Value'; console.log(readOnlyProxy.readOnlyProp); ``` 这里先使用 `Object.defineProperty()` 确保属性不可写，再通过 `Proxy` 拦截属性的修改操作，当尝试修改属性时会在控制台输出警告信息，且修改无效。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值