admin管理员组

文章数量:1641400

关于input元素的readonly和disabled的区别，在查阅学习时，发现网上写的都比较零碎，于是决定对这一块知识点进行汇集总结，因此写此文章，也希望对跟我一样，不太了解readonly和disabled的你有所帮助，建议收藏！！

目录

一、介绍及作用

二、用法

三、区别

1、外观变化不同

2、作用范围不同

3、对元素的影响程度不同

4、表达提交情况不同

5、代码展示

四、常用情况

1、关于readonly

2、关于disabled

一、介绍及作用

  • readonly 把输入的字段设为只读，但是没有禁用 readonly=” readonly”，将元素设置为只读，其他操作正常。
  • disabled 禁用一个input元素。 disabled="disabled"，阻止对元素的一切操作，例如获取焦点，点击事件等。

readOnly和disabled的作用：是使用户不能够更改表单域中的内容。

二、用法

<input type="text" name="name" value="xxx" disabled="true"/>
<input type="text" name="name" value="xxx" readonly="true"/>

这两种写法都会使显示出来的文本框不能输入文字，都能做到使用户不能够更改表单域中的内容。

三、区别

1、外观变化不同

  • dsiabled：会使文本框及字体变灰。
  • readonly：只是使文本框不能输入，外观没有变化。

注: disabled可用readonly代替,加上灰色背景background-color:#cccccc

2、作用范围不同

  • disabled：范围更大，对所有的表单元素都有效，,包括select,radio,checkbox,button等。
  • readonly：范围较小，仅能够阻止修改部分表单的值，只对<input type="text">、<textarea>和<input type="password">有效。

3、对元素的影响程度不同

  • disabled：阻止对元素的一切操作，阻止修改input表单中的值，连button submit都不能够点击。
  • readonly：只是将元素设置为只读，其他操作正常。

4、表达提交情况不同

  • disabled：将表单以post或者get的方式提交的话，值不会被传递出去，输入域的值也不能够通过form表单传递，表单元素的值无法被提交。
  • readonly：可以提交表单，值也照样传递，不影响提交。

5、代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //disabled   灰掉
        //disabled  写在标签里   可以直接写disabled   也可以写 disabled="disabled"
        //在js中 操作disabled  设置true  或  false
        //form提交时    不作为表单域 传输值
        //适用于  所有标签对象
 
        //readonly  只读
        //readonly  写在标签里   readonly   也可以写 readonly="readonly"
        //在js中 readonly  设置true  或  false
        //form提交时  作为表单域 传输值
        //适用于  textArea  password    text  这种 文本
    </script>
</head>
<body>
    <form action="test.html" method="get">
        <!--<input type="text"  name="disa" value="aabbcc" disabled="disabled" />-->
        <input type="text"  name="read" value="aabbcc" readonly="readonly" />
        <input type="submit" value="提交"  />
    </form>
</body>
</html>

四、常用情况

1、关于readonly

  • 在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时将属性设置为readonly。

2、关于disabled

  • 当用户正式提交了表单后需要等待管理员的信息验证，不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值会被清除。
  • 在用户按了提交按钮后，利用javascript将提交按钮disabled掉，可防止在网络条件比较差的环境下，用户反复点击提交按钮导致数据冗余地存入数据库。
  • 一般情况下，为防止客户在网络环境较差时，重复提交表单，当用户点完提交，我们就用js设置submit按钮为disabled。

感谢阅读，(^.^)Y Ya!!欢迎关注收藏，期待你我顶峰相见，加油！！

 

本文标签： 翻了秘籍这有精细区别

版权声明：本文标题：readonly和disabled的作用？区别？别翻了，这有精细汇总齐的秘籍！ 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729318297a1195568.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。