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> <p>最后要注意的是，readonly 和 disabled 的区别在于 disabled 的字段不会被传递到服务器端；而 readonly 的字段会被传递到服务器端。因此，如果你想要阻止用户修改表单字段的值但希望该字段也能够被传递到服务器端时，应该使用 readonly 而不是 disabled。</p</p><h2>HTML DOM Input Date readOnly 属性</h2> <div class="content-intro view-box "><div class="content-body"> <div class="article-intro" id="content"> <h2>Input Date <span class="color_h1">readOnly</span> 属性</h2> <p><img class="navup" src="https://atts..cn/attachments/image/up.gif" alt="Input Date 对象参考手册"> Input Date 对象 </p> <div class="example"> <h2 class="example">实例</h2> <p>设置 date 字段为只读：</p> <div class="example_code"> document.getElementById("myDate").readOnly = true;</div> <p>输出结果：</p> <div class="example_result"> </div> <br> </div> <hr> <h2>定义和用法</h2> <p> readOnly 属性用于返回设置或返回 date 字段是否只读。</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 或 Firefox 浏览器不支持 <input type="date"> 元素。</p> <hr> <h2>语法</h2> <p>返回 readOnly 属性：</p> <div class="code"><div> <em>inputdateObject</em>.readOnly</div></div> <p>设置 readOnly 属性：</p> <div class="code"><div> <em>inputdateObject</em>.readOnly=true|false</div></div> <h2>属性值</h2> <table class="reference" class="reference"> <tr> <th style="width:20%">值</th> <th>描述</th> </tr> <tr> <td>true|false</td> <td> 描述了date字段是否只读： <ul> <li>true - date 字段是只读的</li> <li>false - 默认。 date 字段不是只读的。</li> </ul> </td> </tr> </table> <h2>技术细节</h2> <table class="reference" class="tecspec"><tr> <th style="width:20%">返回值：</th> <td>布尔值，如果 date 字段是只读的返回 true，否则返回false。</td> </tr></table> <br><hr> <h2>更多实例</h2> <div class="example"> <h2 class="example">实例</h2> <p>查看 date 字段是否只读：</p> <div class="example_code"> var x = document.getElementById("myDate").readOnly;</div> <em>x</em>输出结果为： <div class="example_code">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 Date 对象参考手册"> Input Date 对象 </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"> <div> 以上是<a title="VUE中文网" href="https://www.vue88.com/">VUE中文网</a>为你收集整理的<a href="https://www.vue88.com/29144.html">html input readonly HTML DOM Input Date readOnly 属性</a>全部内容。 </div> <div></div> <div> 声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。 </div> </div> <div class="bwrap-la bgfff p20 mt20"> <div class="bwrap-t mb20 hlo-18 fb16"> 相关文章 </div> <ul > <li> <div class="fl mr20 "> <a href="https://www.vue88.com/29134.html" title="html的disabled属性 HTML DOM Radio disabled 属性"><img class="br5 b-se6" src = 'https://www.vue88.com/style/loadgif.gif' lay-src="https://www.vue88.com/imgurl/12913.png" alt="html的disabled属性 HTML DOM Radio disabled 属性"></a> </div> <div> <h2 class="mb10 l-20"><a href="https://www.vue88.com/29134.html" title="html的disabled属性 HTML DOM Radio disabled 属性">html的disabled属性 HTML DOM Radio disabled 属性</a></h2> <div class="mb10 co999"><i class="icon icon-time-circle f14 ml50 dn"></i> <span class="f12 dn">2023-06-01</span> </div> <p class="co666 hlo-20 intro">Radio disabled 属性 Radio 对象实例实例 1禁用单选框按钮:scriptdocument.getElementById("cats").disabled=true;/script输出结...</p> </div> </li><li> <div class="fl mr20 "> <a href="https://www.vue88.com/29124.html" title="html name属性 HTML DOM Radio name 属性"><img class="br5 b-se6" src = 'https://www.vue88.com/style/loadgif.gif' lay-src="https://www.vue88.com/imgurl/12912.png" alt="html name属性 HTML DOM Radio name 属性"></a> </div> <div> <h2 class="mb10 l-20"><a href="https://www.vue88.com/29124.html" title="html name属性 HTML DOM Radio name 属性">html name属性 HTML DOM Radio name 属性</a></h2> <div class="mb10 co999"><i class="icon icon-time-circle f14 ml50 dn"></i> <span class="f12 dn">2023-04-24</span> </div> <p class="co666 hlo-20 intro">Radio name 属性 Radio 对象定义和用法name 属性可设置或返回单选按钮的名称。提示：使用 name 属性定义的单选按钮组 (具有相同...</p> </div> </li><li> <div class="fl mr20 "> <a href="https://www.vue88.com/29110.html" title="html from属性 HTML DOM Input Search form 属性"><img class="br5 b-se6" src = 'https://www.vue88.com/style/loadgif.gif' lay-src="https://www.vue88.com/imgurl/12911.png" alt="html from属性 HTML DOM Input Search form 属性"></a> </div> <div> <h2 class="mb10 l-20"><a href="https://www.vue88.com/29110.html" title="html from属性 HTML DOM Input Search form 属性">html from属性 HTML DOM Input Search form 属性</a></h2> <div class="mb10 co999"><i class="icon icon-time-circle f14 ml50 dn"></i> <span class="f12 dn">2023-04-16</span> </div> <p class="co666 hlo-20 intro">Input Search form 属性 Input Search 对象实例返回包含 input type="search" 元素所属的表单id: var x = document.getElementBy...</p> </div> </li><li> <div class="fl mr20 "> <a href="https://www.vue88.com/29109.html" title=" HTML DOM Input Text defaultValue 属性"><img class="br5 b-se6" src = 'https://www.vue88.com/style/loadgif.gif' lay-src="https://www.vue88.com/imgurl/12910.png" alt=" HTML DOM Input Text defaultValue 属性"></a> </div> <div> <h2 class="mb10 l-20"><a href="https://www.vue88.com/29109.html" title=" HTML DOM Input Text defaultValue 属性"> HTML DOM Input Text defaultValue 属性</a></h2> <div class="mb10 co999"><i class="icon icon-time-circle f14 ml50 dn"></i> <span class="f12 dn">2023-06-13</span> </div> <p class="co666 hlo-20 intro">Input Text defaultValue 属性 Input Text 对象实例修改文本域的默认值：document.getElementById("myText").defaultValue = "Go...</p> </div> </li><li> <div class="fl mr20 "> <a href="https://www.vue88.com/29094.html" title=" HTML DOM Input Text type 属性"><img class="br5 b-se6" src = 'https://www.vue88.com/style/loadgif.gif' lay-src="https://www.vue88.com/imgurl/12909.png" alt=" HTML DOM Input Text type 属性"></a> </div> <div> <h2 class="mb10 l-20"><a href="https://www.vue88.com/29094.html" title=" HTML DOM Input Text type 属性"> HTML DOM Input Text type 属性</a></h2> <div class="mb10 co999"><i class="icon icon-time-circle f14 ml50 dn"></i> <span class="f12 dn">2023-04-29</span> </div> <p class="co666 hlo-20 intro">Input Text type 属性 Input Text 对象Example查看文本域是属于哪种表单元素类型:var x = document.getElementById("myText").ty...</p> </div> </li></ul> </div> </div> <div class="bwrap-r "> <div class="bwrap-ra bgfff p20 "> <div class="bwrap-t mb20 hlo-18 fb16"> 猜您喜欢 </div> <ul class="mt10"> </ul> </div> <div class="bwrap-ras"> <div class="bwrap-rb bgfff p20 mt20"> <div class="bwrap-t mb20 hlo-18 fb16"> 标签TAG </div> <ul> <a href="https://www.vue88.com/rank/" title="RANK">RANK</a> <a href="https://www.vue88.com/ds50/" title="Zookeeper教程">Zookeeper教程</a> <a href="https://www.vue88.com/lizi/" title="例子">例子</a> <a href="https://www.vue88.com/os41/" title="Axios中文文档">Axios中文文档</a> <a href="https://www.vue88.com/bv34/" title="MariaDB教程">MariaDB教程</a> <a href="https://www.vue88.com/sm52/" title="MSAccess教程">MSAccess教程</a> <a href="https://www.vue88.com/yk82/" title="Django4中文教程">Django4中文教程</a> <a href="https://www.vue88.com/ajaxjcil/" title="AJAX教程">AJAX教程</a> <a href="https://www.vue88.com/gy28/" title="Shell编程范例">Shell编程范例</a> <a href="https://www.vue88.com/gf75/" title="Oracle教程">Oracle教程</a> </ul> </div> <div class="bwrap-ra bgfff p20 mt20"> <div class="bwrap-t mb20 hlo-18 fb16"> 本月热门 </div> <ul class="mt10"> <li> <a href="https://www.vue88.com/1366.html" title="vue3组件写法 Vue 3.0 组件基础">vue3组件写法 Vue 3.0 组件基础</a> </li> <li> <a href="https://www.vue88.com/982.html" title="vue的函数式组件 Vue 3.0 函数式组件">vue的函数式组件 Vue 3.0 函数式组件</a> </li> <li> <a href="https://www.vue88.com/1603.html" title="vue 修改class Vue 3.0 过渡的class名更改">vue 修改class Vue 3.0 过渡的class名更改</a> </li> <li> <a href="https://www.vue88.com/1411.html" title="vue中class和style如何动态绑定 Vue 3.0 Class与Style绑定">vue中class和style如何动态绑定 Vue 3.0 Class与Style绑定</a> </li> <li> <a href="https://www.vue88.com/1203.html" title="vue3.0响应式原理 Vue 3.0 响应性 基础">vue3.0响应式原理 Vue 3.0 响应性 基础</a> </li> </ul> </div> </div> </div> </div> </div> <div class="bg333 cle "> <div class="w1200 "> <div class="p20"> <div class="hlo-20 t-a-c co999 f14 mt10"> © 2024 <a href="https://www.vue88.com/" title="VUE中文网">VUE中文网</a> vue88.com 版权所有 <a href="https://www.vue88.com/lyb/" class="lxwm ">联系我们</a> </div> <div class="hlo-20 t-a-c co999 f14 mt10"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">桂ICP备12005667号-27</a> <span title="返回底部" class="cupo" onclick="window.scrollTo('0','0')">返回底部</span> </div> </div> </div> </div> <script src="https://www.vue88.com/style/layui/layui.js"></script> <script> layui.use(['layer','flow'],function(){ var $ = layui.jquery; var flow = layui.flow; //按屏加载图片 flow.lazyimg({ elem: 'img' }); $('.hlogo-menu').click(function(){ $('#hnav').fadeIn(500); $('.showbg').fadeIn(500); }); $('.hnavclose').click(function(){ $('#hnav').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?66de37a305b1c323dcca8b832923291c"; 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>
