css属性readonly与disabled的区别

最新推荐文章于 2024-04-19 15:58:50 发布

夜风天下

最新推荐文章于 2024-04-19 15:58:50 发布

阅读量3.8k

点赞数 2

分类专栏： css/html 文章标签： css html readonly disabled

本文链接：https://blog.csdn.net/cn_yefeng/article/details/79871065

版权

css/html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一. 范围不同

readonly 只对 <input> 和 <textarea> 标签有效

disabled 对所有表单元素都有效, 包括：<input>, <textarea>, <button>, <label>, <option>, <select>等

二. 程度不同

readonly 只是将元素设置为只读，不可输入，对其它操作没有影响

disabled 阻止元素的一切操作。包括获取焦点，点击事件等

三. 表单提交

readonly 只是将元素设置为只读，不影响表单提交

disabled 设置了该属性的表单元素，值将不会随着表单一起提交

四. JavaScript操作

设置了readonly和disabled的表单元素，用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的，同样背景色，字体颜色等也可以通过JavaScript来改变。例如：下面的代码运行在chrome浏览器中时，点击“点我”后两个input框的字体颜色、背景色，值都会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input{
            height:30px;
            width: 200px;
        }
    </style>
</head>
<body>
    <input id="input1" type="text" value="1" readonly="true">
    <input id="input2" type="text" value="2" disabled="true">
    <input type="button" οnclick="test()" value="点我">
    <script>
        function test(){
            var input1 = document.getElementById('input1');
            var input2 = document.getElementById('input2');

            input1.style.cssText = 'color:red;background-color:green'
            input2.style.cssText = 'color:red;background-color:green'

            input1.value = 6;
            input2.value = 6
        }
    </script>
</body>
</html>

夜风天下

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
css属性readonly与disabled的区别

一. 范围不同readonly 只对 &lt;input&gt; 和 &lt;textarea&gt; 标签有效disabled 对所有表单元素都有效, 包括：&lt;input&gt;, &lt;textarea&gt;, &lt;button&gt;, &lt;label&gt;, &lt;option&gt;, &lt;select&gt;等二. 程度不同readonly 只
复制链接

扫一扫