修改readonly 属性值 document.getElementById("id").readOnly = true;

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

#Javascript #ViewUI

本文介绍如何使用JavaScript修改HTML元素的readonly属性值，通过实例代码演示实现过程。

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

修改readonly 属性值：

document.getElementById("id").readOnly = true;
selenium操作日历控件
weixin_33910385的博客
06-02 896
日历控件是web网站上经常会遇到的一个场景，有些输入框是可以直接输入日期的，有些不能，以我们经常抢票的12306网站为例，详细讲解如何解决日历控件为readonly属性的问题。 基本思路：先用js去掉readonly属性，然后直接输入日期文本内容 一、日历控件 1.打开12306的车票查询界面，在出发日期输入框无法直接输入时间 2.常规思路是点开日历控件弹出框，从日历控件上...
js两种只读实现方式
Event driven
11-04 418
想让input框的值为只读，有两种实现： document.getELementById(textId).disabled=true; document.getELementById(textId).readOnly=true; 第一种input的值变成灰色，第二种input的值的颜色正常显示。...
js控件设置只读属性和不可用属性
weixin_30540691的博客
04-23 2457
介绍js实现只读的几种方法： 设置控件只读的话，我们要先清楚哪些没有readOlny这个属性 我知道的checkbox和RadioButton没有readOlny这个属性，我上一篇已经介绍了如何设置checkbox的只读了。 今天我们只是了解通用的控件只读和不可用 document.getELementById(textId).disabled=true;document.getEleme...
DOM修改元素内容
illhm的博客
07-16 680
描述
用javascript控制readonly属性
watering17inworking的专栏
05-21 709
 如果我们需要用javascript控制/设置表单的readonly属性，如果使用document.myform.mytext.readony=true/false 是没有任何作用的，如果控制的话，可以将mytext加一个ID然后用ID控制readonly 属性，代码如下 function ee() { document.getElementById("MyID").readOnly=
关于js操作页面组建的readonly属性
知识积淀
07-16 801
<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
错误<script type="text/javascript"> var re="<%=re.getName() %>"; var nam="您好，"; var user_name='<%=re.getUser_name() %>'; var phone='<%=re.getPhone() %>'; var mail='<%=re.getMail() %>' var chage_username=document.querySelector(".chage_username input"); var chage_phone=document.querySelector(".chage_phone input"); var chage_mail=document.querySelector(".chage_mail input"); if(user_name!='null'){ chage_username.value=user_name; } if(phone!='null'){ chage_phone.value=phone; } if(mail!='null'){ chage_mail.value=mail; } document.getElementById("na").innerHTML =nam+re; var i=0; function chage(){ var tabled=document.querySelector(".tabled"); var chage_username=document.querySelector(".chage_username input"); var chage_sex=document.querySelector(".chage_sex input"); var chage_phone=document.querySelector(".chage_phone input"); var chage_mail=document.querySelector(".chage_mail input"); var chage_age=document.querySelector(".chage_age input"); if(i%2==0){ tabled.style.display="block"; chage_username.removeAttribute("readonly"); chage_sex.removeAttribute("readonly"); chage_phone.removeAttribute("readonly"); chage_mail.removeAttribute("readonly"); chage_age.removeAttribute("readonly"); } else{ tabled.style.display="none"; chage_username.setAttribute("readonly",'true'); chage_sex.setAttribute("readonly",'true'); chage_phone.setAttribute("readonly",'true'); chage_mail.setAttribute("readonly",'true'); chage_age.setAttribute("readonly",'true'); } i++; } </script>
05-29
此外，在使用innerHTML属性输出内容时，需要注意防止XSS攻击，最好使用innerText属性来输出文本内容。此外，可能需要对表单元素的值进行判断，避免出现null值，可以使用typeof操作符或者判断其是否等于字符串"null...
constructor(option) { this.container = document.getElementById(option.id) const topInput = document.createElement('div') topInput.class = 'display' this.container.appendChild(topInput) const input = document.createElement('input') input.id = 'input' topInput.appendChild(input) const answer = document.createElement('input') answer.id = 'answer' topInput.appendChild(answer) const buttonsDiv = document.createElement('div') buttonsDiv.className = 'buttons' const buttonRows = [ [{ text: 'c', classes: ['function'] }, { text: '7' }, { text: '4' }, { text: '1' }, { text: '%', classes: ['function'] }], [{ text: '&divide;', classes: ['function'] }, { text: '8' }, { text: '5' }, { text: '2' }, { text: '0' }], [{ text: '×', classes: ['function'] }, { text: '9' }, { text: '6' }, { text: '3' }, { text: '.' }], [ { text: '⌫', classes: ['operator', 'function'] }, { text: '-', classes: ['operator', 'function'] }, { text: '+', classes: ['function'] }, { text: '=', classes: ['operator', 'equal'] } ] ] buttonRows.forEach((rowConfig) => { const rowDiv = document.createElement('div') rowDiv.className = 'row' rowConfig.forEach((btnConfig) => { const button = document.createElement('button') button.className = 'button' button.textContent = btnConfig.text if (btnConfig.classes) { btnConfig.classes.forEach((cls) => { button.classList.add(cls) }) } rowDiv.appendChild(button) }) buttonsDiv.appendChild(rowDiv) }) this.container.appendChild(buttonsDiv) this.display = document.getElementById('input') this.answer = document.getElementById('answer') this.buttons = document.querySelectorAll('.button') this.buttonMap = new Map() this.lastChar = '' this.keyMappings = { Enter: '=', Backspace: '⌫', Escape: 'c', '*': '×', '/': '&divide;', '.': '.', '%': '%', '+': '+', '-': '-', 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9' } this.init() }设置上述代码中两个input光标自动跟随
最新发布
08-14
answer.readOnly = true; // 答案框通常设为只读 topInput.appendChild(answer); // ... 中间按钮创建代码保持不变 ... // 获取DOM元素 this.display = document.getElementById('input'); this.answer = ...
[removed]为input设置readOnly属性(示例讲解)
10-26
为了在Javascript中为input设置readonly属性，可以使用document.getElementById()方法获取需要操作的input元素对象。通过调用setAttribute方法，并将第一个参数设为"readonly"，第二个参数设为字符串"true"，即可...
JS中如何设置readOnly的值
10-26
总结来说，ReadOnly属性适用于那些需要保持输入值不变，同时又希望这些值能被表单提交的场景，而Disabled属性适合于那些不仅需要防止用户更改内容，还希望彻底禁用控件的场景。在JavaScript中，设置ReadOnly属性应...
js 修改readonly属性
06-05
当input设置了readonly后，如果外层容器需要触发事件，可以添加pointer-events:none（引用[5]）但注意，引用[2]中的示例使用的是直接给readOnly属性赋值（document.getElementById('Input').readOnly=true;...
表单中的readOnly 和disabled
weixin_34278190的博客
10-07 451
adonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。 但是表单元素在使用了disabled后，当我们将表...
用JS实现改变文本框的只读属性
weixin_30564785的博客
04-05 393
<input id="aaa" readonly><input id="bbb" readonly><script>document.getElementById("aaa").readOnly = false;document.getElementById("bbb").readOnly = false;</script> 转载于...
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
python日历下拉框_selenium+Python(Js处理日历控件)
weixin_39766109的博客
11-26 617
日历控件是web网站上经常会遇到的一个场景，有些输入框是可以直接输入日期的，有些不能，以我们经常抢票的12306网站为例，详细讲解如何解决日历控件为readonly属性的问题。基本思路：先用js去掉readonly属性，然后直接输入日期文本内容一、日历控件1.打开12306的车票查询界面，在出发日期输入框无法直接输入时间2.常规思路是点开日历控件弹出框，从日历控件上点日期，这样操作比较烦躁，并且我...
document.getElementById(“XXX“).disabled=““；
weixin_43862596的博客
09-01 2387
想要设置表单元素不能访问时，使用document.getElementById(“XXX”).disabled=“true”; 但是想要取消disabled的时候，发现document.getElementById(“XXX”).disabled=“false”; 无效 正确的写法为document.getElementById(“XXX”).disabled=false; 去掉引号 或者document.getElementById(“XXX”).disabled=""; 引号内设置为空 ...
用javascript控制readonly属性,disabled属性
xy_liwei的专栏
12-21 864
<br />如果我们需要用javascript控制/设置表单的readonly属性，如果使用document.myform.mytext.readony=true/false 是没有任何作用的，如果控制的话，可以将mytext加一个ID然后用ID控制readonly 属性，代码如下 <br /><html> <br /><script> <br />function ee() <br />{ <br /><br />document.getElementById("MyID").readOnly=true;
Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性
pan_junbiao的博客
09-25 5295
Document 对象，当 HTML 文档加载到 Web 浏览器中时，它就变成了一个文档对象。文档对象是 HTML 文档的根节点。文档对象是窗口对象的属性。innerHTML 属性声明了元素含有的 HTML 文本，不包括元素本身的开始标记和结束标记。通过该属性可以为指定的 HTML 文本替换元素内容。innerText 属性与innerHTML 属性的功能类似，只是该属性只能声明元素包含的文本内容，即使指定的是 HTML 文本，它也会认为是普通文本而原样输出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值