css readonly和disabled的区别

readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别；
disabled表示“使残废，使无效”，都残废了，那还管你有没有文字内容，都得残掉。

1、readonly和disabled作用元素的范围不同

那么两者的作用范围区别在哪呢？
disabled属性可以作用于所有的表单元素。
readonly属性只对text">、number">、和<input type="<span style="color: rgba(255, 0, 0, 1)">password</span>">等可以输入的表单元素</code>有效。</span></p> <p><span style="font-size: 12px">2、readonly和disabled对元素的作用程度不同</span></p> <p><span style="font-size: 12px"><code>readonly</code>属性只是将元素设置为只读，可以获取焦点、失去焦点。而<code>disabled</code>属性直接阻止对元素的一切操作。 <br><code>disabled</code>属性<span style="color: rgba(255, 0, 0, 1)">阻止对元素的一切操作，<span style="color: rgba(0, 0, 0, 1)">例如</span><span style="color: rgba(255, 0, 0, 1)">获取焦点，点击事件等等。<br><code>readonly</code><span style="color: rgba(0, 0, 0, 1)">属性</span><span style="color: rgba(255, 0, 0, 1)">只是将元素设置为只读，其他操作正常。</span></span></span></span></p> <p><span style="color: rgba(0, 0, 0, 1); font-size: 12px">readonly和disabled对表单提交的作用不同</span></p> <p><span style="font-size: 12px; color: rgba(0, 0, 0, 1)"><strong><code>disabled</code></strong>属性<span style="color: rgba(255, 0, 0, 1)">可以让表单元素的值无法被提交</span>。<br><strong><code>readonly</code></strong>属性则不影响提交问题。<br>这个需要进行测试。。</span></p> <p><span style="font-size: 12px">总结</span></p> <p><span style="font-size: 12px">readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还<span style="color: rgba(255, 0, 0, 1)">可以选中或拷贝其文本。</span>readonly 属性<span style="color: rgba(255, 0, 0, 1)">可以防止用户对值进行修改，直到满足某些条件为止<span style="color: rgba(0, 0, 0, 1)">（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。</span></span><span style="color: rgba(0, 0, 0, 1)">readonly 属性可与 </span><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(255, 0, 0, 1)"><input type="text"> 或 <input type="password"></span> 配合使用。</span><br></span>disabled 属性规定应该禁用 input 元素。<span style="color: rgba(255, 0, 0, 1)">被禁用的 input 元素既不可用，也不可点击。<span style="color: rgba(0, 0, 0, 1)">可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。</span></span>注释：<span style="color: rgba(255, 0, 0, 1)">disabled 属性无法与 <input type="hidden"> 一起使用。</span></span></p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid100-0.html' class='tagbtn' target='_blank'>CSS</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565125.html">DOM修改使用DOM操作CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564529.html">1.css布局技巧</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564254.html">Scss支持多主题切换的方案实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563647.html">google icons 的使用和 css 设置图标为 loading 状态</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-560668.html">node-scss npm的时候报错</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-559517.html">CSS设置文字超出部分自动换行</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557603.html">整理gulp自动化构建工具(包含PostCss)</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557273.html">CSS背景属性</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557438.html">css中溢出的处理</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552285.html">51-Web基础-CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552278.html">CSS3与页面布局学习总结（四）——页面布局大全</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>