HTML input readonly 属性是一个布尔属性，它指定一个输入字段是否可以编辑。如果设置了 readonly 属性，则用户将无法修改该字段的值，但可以选择其中的文本。
<input type="text" name="name" value="John Doe" readonly>
readonly 属性可以应用于任何类型的 元素，包括 text、checkbox、radio、password 等。它不能应用于 或 <select> 元素。</p> <p>readonly 属性可以通过 JavaScript 来动态地设置或取消，这样就可以根据不同情况来决定是否允许用户修改表单字段的值。例如，当用户选中一个复选框时，可以使相关的文本字段变为只读：</p> <pre> <input type="checkbox" onclick="document.getElementById('name').readOnly=this.checked;"> <input type="text" id="name" value="John Doe"> </pre> <p>此外，readonly 属性也可以在表单中使用，例如在表单中显示一个固定的值而不需要用户修改。这样就能够避免出错并减少开发时间。例如：</p> <pre> <form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname" value="John" readonly> <br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname" value="" /> <br /> <input type="submit" value="Submit"> <</p><h2>HTML DOM Input URL readOnly 属性</h2> <div class="content-intro view-box "><div class="content-body"> <div class="article-intro" id="content"> <h2>Input URL <span class="color_h1">readOnly</span> 属性</h2> <p><img class="navup" src="https://atts..cn/attachments/image/up.gif" alt="Input URL 对象参考手册"> Input URL 对象 </p> <div class="example"> <h2 class="example">实例</h2> <p>设置 URL 字段为只读：</p> <div class="example_code notranslate"> document.getElementById("myURL").readOnly = true;</div> <p>输出结果：</p> <div class="example_result notranslate"> </div> <br> </div> <hr> <h2>定义和用法</h2> <p>readOnly 属性用于设置或者返回 URL 字段是否为只读。</p> <p>只读字段不能修改。但是可以复制该字段的内容。</p> <p>该属性反映了 HTML readonly 属性。</p> <p><strong>提示：</strong> 为了确保表单数据的准确性，可以使用 disabled 属性替代 。</p> <hr> <h2>浏览器支持</h2> <p> <img src="https://atts..cn/attachments/image/compatible_ie.gif" width="31" height="30" alt="Internet Explorer" title="Internet Explorer"><img src="https://atts..cn/attachments/image/compatible_firefox.gif" width="31" height="30" alt="Firefox" title="Firefox"><img src="https://atts..cn/attachments/image/compatible_opera.gif" width="28" height="30" alt="Opera" title="Opera"><img src="https://atts..cn/attachments/image/compatible_chrome.gif" width="31" height="30" alt="Google Chrome" title="Google Chrome"><img src="https://atts..cn/attachments/image/compatible_safari.gif" width="28" height="30" alt="Safari" title="Safari"></p> <p>所有主流浏览器都支持 readOnly 属性。</p> <p><strong>注意：</strong> Internet Explorer 或 Safari 浏览器不支持使用 type="url" 属性的 HTML <input> 元素。</p> <hr> <h2>语法</h2> <p>返回 readOnly 属性：</p> <div class="code notranslate"><div> <em>urlObject</em>.readOnly</div></div> <p>设置 readOnly 属性：</p> <div class="code notranslate"><div> <em>urlObject</em>.readOnly=true|false</div></div> <h2>属性值</h2> <table class="reference" class="reference"> <tbody><tr> <th style="width:20%">值</th> <th>描述</th> </tr> <tr> <td>true|false</td> <td> 描述了 URL 字段是否只读 <ul> <li>true - URL 字段为只读</li> <li>false - 默认。 URL 字段不是只读</li> </ul> </td> </tr> </tbody></table> <h2>技术细节</h2> <table class="reference" class="tecspec"><tr> <th style="width:20%">返回值：</th> <td>布尔值，如果 URL 字段为只读返回true，否则返回 false。</td> </tr></table> <br><hr> <h2>更多实例</h2> <div class="example"> <h2 class="example">实例</h2> <p>查看 URL 字段是否为只读：</p> <div class="example_code notranslate"> var x = document.getElementById("myURL").readOnly;</div> <em>x</em>输出结果为： <div class="example_code notranslate">true</div> <br> </div> <br><hr> <h2>相关页面</h2> <p>HTML 参考手册: HTML <input> readonly 属性</p> <hr> <img class="navup" src="https://atts..cn/attachments/image/up.gif" alt="Input URL 对象参考手册"> Input URL 对象 </div> </div></div> </div> <div class="readall_box"> <div class="read_more_mask"></div> <div class="show-content"><span>阅读全文</span></div> </div> </div> </div> <div class="bgfff p20 mt20 co999 f14 l-25 mb20"> <div> 以上是<a title="58脚本" href="https://www.58jiaoben.com/">58脚本</a>为你收集整理的<a href="https://www.58jiaoben.com/19628.html">html input readonly HTML DOM Input URL readOnly 属性</a>全部内容。 </div> <div></div> <div> 声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。 </div> </div> <style> @media screen and (min-width: 769px){ .twzt-ul li { width: 25%; } } </style> <div class="twzt mb20" style="margin-top: 0px;"> <div class="f16 hlo-20"><a href="https://www.58jiaoben.com/tag/" title="TAG标签" ><span class="f14 fr co999">全部标签 <i class="icon icon-doubleright f12"></i></span></a><strong>标签详情</strong></div> <ul class="twzt-ul"> <li> <div class="libox"><a href="https://www.58jiaoben.com/uv49/"> <img src="https://www.58jiaoben.com/style/phpimg/a81.png" alt=""> <p>XMLDOM教程</p></a> </div> </li> <li> <div class="libox"><a href="https://www.58jiaoben.com/li56/"> <img src="https://www.58jiaoben.com/style/phpimg/a96.png" alt=""> <p>neo4j教程</p></a> </div> </li> <li> <div class="libox"><a href="https://www.58jiaoben.com/pg66/"> <img src="https://www.58jiaoben.com/style/phpimg/a82.png" alt=""> <p>Arduino教程</p></a> </div> </li> <li> <div class="libox"><a href="https://www.58jiaoben.com/kp02/"> <img src="https://www.58jiaoben.com/style/phpimg/a69.png" alt=""> <p>Hibernate教程</p></a> </div> </li> </ul> </div> <div class="twwrap-t f16 bgfff "><span>相关文章</span></div> <ul class="mt20 twlistinfo"> <li> <div class="liimg"> <a href="https://www.58jiaoben.com/19604.html" title="html input readonly HTML DOM Input Week readOnly 属性"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11960.png" alt="html input readonly HTML DOM Input Week readOnly 属性"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19604.html" title="html input readonly HTML DOM Input Week readOnly 属性">html input readonly HTML DOM Input Week readOnly 属性</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">03-15</a></span> </div> <p class="co666 hlo-20 intro dn">Input Week readOnly 属性 Input Week 对象实例设置 week 字段为只读：document.getElementById("myWeek").readOnly = true;输出...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19570.html" title="html media属性 HTML DOM Source media 属性"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11957.png" alt="html media属性 HTML DOM Source media 属性"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19570.html" title="html media属性 HTML DOM Source media 属性">html media属性 HTML DOM Source media 属性</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">05-07</a></span> </div> <p class="co666 hlo-20 intro dn">Source media 属性 Source 对象实例返回指定文件为什么样的媒体/设备进行了优化：var x = document.getElementById("mySource")....</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19546.html" title=" OceanBase PURGE TABLE"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11954.png" alt=" OceanBase PURGE TABLE"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19546.html" title=" OceanBase PURGE TABLE"> OceanBase PURGE TABLE</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">05-07</a></span> </div> <p class="co666 hlo-20 intro dn">描述该语句用于删除放在回收站的表。格式 PURGE TABLE object_name;参数解释参数描述object_name对象进入回收站后的新名字示例删...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19416.html" title="鸿蒙系统 鸿蒙OS ohos.event.notification class"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11941.png" alt="鸿蒙系统 鸿蒙OS ohos.event.notification class"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19416.html" title="鸿蒙系统 鸿蒙OS ohos.event.notification class">鸿蒙系统 鸿蒙OS ohos.event.notification class</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"> <a class="mr10" title="鸿蒙OS开发文档" href="https://www.58jiaoben.com/ac34/">鸿蒙OS开发文档</a> </span> </div> <p class="co666 hlo-20 intro dn">...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19391.html" title="鸿蒙系统 鸿蒙OS ohos.data.resultset interface"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11939.png" alt="鸿蒙系统 鸿蒙OS ohos.data.resultset interface"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19391.html" title="鸿蒙系统 鸿蒙OS ohos.data.resultset interface">鸿蒙系统 鸿蒙OS ohos.data.resultset interface</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"> <a class="mr10" title="鸿蒙OS开发文档" href="https://www.58jiaoben.com/ac34/">鸿蒙OS开发文档</a> </span> </div> <p class="co666 hlo-20 intro dn">...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19292.html" title="鸿蒙os蓝牙绝对音量 鸿蒙OS 蓝牙"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11929.png" alt="鸿蒙os蓝牙绝对音量 鸿蒙OS 蓝牙"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19292.html" title="鸿蒙os蓝牙绝对音量 鸿蒙OS 蓝牙">鸿蒙os蓝牙绝对音量 鸿蒙OS 蓝牙</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"> <a class="mr10" title="鸿蒙OS开发文档" href="https://www.58jiaoben.com/ac34/">鸿蒙OS开发文档</a> </span> </div> <p class="co666 hlo-20 intro dn">鸿蒙OS 蓝牙概述鸿蒙OS 传统蓝牙本机管理鸿蒙OS 传统蓝牙远端设备操作鸿蒙OS BLE扫描和广播...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19280.html" title=" PostgreSQL 版本和平台兼容性"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11928.png" alt=" PostgreSQL 版本和平台兼容性"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19280.html" title=" PostgreSQL 版本和平台兼容性"> PostgreSQL 版本和平台兼容性</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">03-31</a></span> </div> <p class="co666 hlo-20 intro dn">19.13.1. 以前的 PostgreSQL 版本19.13.2. 平台和客户端兼容性19.13.1.以前的 PostgreSQL 版本array_nulls (boolean)这个参数控...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19247.html" title=" PostgreSQL 连续归档和时间点恢复（PITR）"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11924.png" alt=" PostgreSQL 连续归档和时间点恢复（PITR）"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19247.html" title=" PostgreSQL 连续归档和时间点恢复（PITR）"> PostgreSQL 连续归档和时间点恢复（PITR）</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">05-14</a></span> </div> <p class="co666 hlo-20 intro dn">25.3.1. 建立WAL归档25.3.2.制作一个基础备份25.3.3. 使用低级API制作一个基础备份25.3.4. 使用一个连续归档备份进行恢复25.3.5....</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19193.html" title=" PostgreSQL 测试评估"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11919.png" alt=" PostgreSQL 测试评估"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19193.html" title=" PostgreSQL 测试评估"> PostgreSQL 测试评估</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">04-15</a></span> </div> <p class="co666 hlo-20 intro dn">32.2.1. 错误消息差异32.2.2. 区域差异32.2.3. 日期和时间差异32.2.4. 浮点差异32.2.5. 行序差异32.2.6. 栈深度不足32.2.7. “随...</p> </div> </li><li> <div class="liimg"> <a href="https://www.58jiaoben.com/19173.html" title=" PostgreSQL 杂项函数"><img class="br5 b-se6" src = 'https://www.58jiaoben.com/style/loadgif.gif' lay-src="https://www.58jiaoben.com/imgurl/11917.png" alt=" PostgreSQL 杂项函数"></a> </div> <div class="licon"> <h2 class="mb20 l-30"><a href="https://www.58jiaoben.com/19173.html" title=" PostgreSQL 杂项函数"> PostgreSQL 杂项函数</a></h2> <div class="mb10 co999"> <span class="f12 licon-tag"><a rel="nofollow">05-23</a></span> </div> <p class="co666 hlo-20 intro dn">一如往常，总有一些函数不适合放在任何其他地方。PQfreemem释放libpq分配的内存。void PQfreemem(void *ptr);释放libpq分配的内...</p> </div> </li></ul> </div> <div class="twwrap-r "> <div class="twwrap-ra bgfff"> <div class="twwrap-t f16 bgfff "><span>热门文章</span></div> <ul class="mt10"> <li><a href="https://www.58jiaoben.com/19705.html" title="html form input HTML DOM Input Date form 属性">html form input HTML DOM Input Date form 属性</a></li> <li><a href="https://www.58jiaoben.com/19695.html" title="html input required HTML DOM Input Month required 属性">html input required HTML DOM Input Month required 属性</a></li> <li><a href="https://www.58jiaoben.com/19628.html" title="html input readonly HTML DOM Input URL readOnly 属性">html input readonly HTML DOM Input URL readOnly 属性</a></li> <li><a href="https://www.58jiaoben.com/19604.html" title="html input readonly HTML DOM Input Week readOnly 属性">html input readonly HTML DOM Input Week readOnly 属性</a></li> <li><a href="https://www.58jiaoben.com/19570.html" title="html media属性 HTML DOM Source media 属性">html media属性 HTML DOM Source media 属性</a></li> <li><a href="https://www.58jiaoben.com/19546.html" title=" OceanBase PURGE TABLE"> OceanBase PURGE TABLE</a></li> <li><a href="https://www.58jiaoben.com/19416.html" title="鸿蒙系统 鸿蒙OS ohos.event.notification class">鸿蒙系统 鸿蒙OS ohos.event.notification class</a></li> <li><a href="https://www.58jiaoben.com/19391.html" title="鸿蒙系统 鸿蒙OS ohos.data.resultset interface">鸿蒙系统 鸿蒙OS ohos.data.resultset interface</a></li> <li><a href="https://www.58jiaoben.com/19292.html" title="鸿蒙os蓝牙绝对音量 鸿蒙OS 蓝牙">鸿蒙os蓝牙绝对音量 鸿蒙OS 蓝牙</a></li> <li><a href="https://www.58jiaoben.com/19280.html" title=" PostgreSQL 版本和平台兼容性"> PostgreSQL 版本和平台兼容性</a></li> </ul> </div> <div class="twwrap-rb bgfff mt20"> <div class="twwrap-t f16 bgfff "><span>推荐文章</span></div> <ul class="mt10"> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19803.html" title="html input date HTML DOM Input DatetimeLocal type 属性">html input date HTML DOM Input DatetimeLocal type 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">04-10</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19795.html" title="html input value属性 HTML DOM Input Email defaultValue 属性">html input value属性 HTML DOM Input Email defaultValue 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">04-06</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19786.html" title="html input range HTML DOM Input Range form 属性">html input range HTML DOM Input Range form 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">04-08</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19770.html" title="html fileupload HTML DOM FileUpload type 属性">html fileupload HTML DOM FileUpload type 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">03-23</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19756.html" title=" PostgreSQL 管理数据库"> PostgreSQL 管理数据库</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">05-23</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19729.html" title="html input required HTML DOM Input Date required 属性">html input required HTML DOM Input Date required 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">03-19</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19688.html" title="htmlchecked属性取值 HTML DOM Radio defaultChecked 属性">htmlchecked属性取值 HTML DOM Radio defaultChecked 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">03-19</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19663.html" title="htmlform的属性 HTML DOM Reset form 属性">htmlform的属性 HTML DOM Reset form 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">05-18</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19648.html" title="html input date HTML DOM Input Time type 属性">html input date HTML DOM Input Time type 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">05-28</a></span> </div> </div> </li> <li> <div class="licon" style="width:100%"> <a href="https://www.58jiaoben.com/19595.html" title="html method属性 HTML DOM Meter value 属性">html method属性 HTML DOM Meter value 属性</a> <div class="mt10"> <span class="f14 co999"><a rel="nofollow">04-21</a></span> </div> </div> </li> </ul> </div> <div class="twwrap-ra bgfff mb20"> <div class="twwrap-t f16 bgfff "><span>猜您喜欢</span></div> <ul class="mt10"> </ul> </div> </div></div> </div> <div class="bg333 cle "> <div class="w1200 "> <div class="p20"> <div class="hlo-30 t-a-c coaaa f14 mt10"> © 2024 <a href="https://www.58jiaoben.com/" title="58脚本">58脚本</a> 58jiaoben.com 版权所有 <a href="https://www.58jiaoben.com/lyb/" class="lxwm ">联系我们</a> </div> <div class="hlo-30 t-a-c coaaa f14 mt10"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">桂ICP备12005667号-28</a> Powered by CMS </div> </div> </div> </div> <section class="ftop"> <div style=" display:block;border-radius:25px;overflow:hidden;width:40px;background-color:#FFFFFF;box-shadow:2px 2px 6px -2px rgba(0,0,0,0.25); height: 81px;"> <div class="icon icon-upward f40 cupo " style=" color: #DDDDDD; height: 40px; text-align: center;border-bottom: 1px solid #EDEDED;" title="返回顶部" onclick="window.scrollTo('0','0')" ></div> <div class="icon icon-down f40 cupo " style=" color: #DDDDDD; height: 40px; text-align: center;" title="返回底部" onclick="window.scrollTo('0',document.body.scrollHeight)" ></div> </div> </section> <script src="https://www.58jiaoben.com/style/layui/layui.js"></script> <script> layui.use(['layer','flow'],function(){ var $ = layui.jquery; var flow = layui.flow; //按屏加载图片 flow.lazyimg({ elem: 'img' }); var kw = ($(window).width()-1200)/2 - 70; $('.ftop').css('right',kw+'px'); $('.twhead-menu').click(function(){ $('.mtwhead-nav').fadeIn(500); $('.showbg').fadeIn(500); }); $('.mtwnavclose').click(function(){ $('.mtwhead-nav').fadeOut(100); $('.showbg').fadeOut(100); }); var bconh = $('.bcon').height(); if(bconh > 1500){ $('.bconh').css({"height":"1500px","overflow":"hidden"}); $('.readall_box').show(); } $('.readall_box').click(function(){ $('.bconh').css({"height":"100%","overflow":"hidden"}); $('.readall_box').hide(); }); }); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7b3439d1441116402421d4ba68531318"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?37c2da7a59ae14ddbb2d20ac2ddc3ab9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
