input 中 readonly 和 disabled 的区别

三大区别：
1. disabled 使得我们提交的表单不会包括该值
2. disabled 针对所有的表单元素都有效
readonly 只针对 input(text/password) 和 textarea 有效
3. disabled 阻止点击事件

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <!-- 
        disabled 使得我们提交的表单不会包括该值
        服务端拿到的 body：
        { readonly: 'readonly' }
     -->
    <form
        action="http://localhost:3000/postForm1"
        method="post"
        style="display: flex; flex-direction:column; width: 200px"
        >
        <input name="readonly" value="readonly" readonly onclick="hello()" />
        <input name="disabled" value="disabled" disabled onclick="hello()"/>

        <!-- 
            disabled 针对所有的表单元素都有效
            readonly 只针对 input(text/password) 和 textarea 有效
        -->
        <select readonly>
            <option>readonly1</option>
            <option>readonly2</option>
        </select>
        <select disabled>
            <option>disabled1</option>
            <option>disabled2</option>
        </select>
        <button type="submit">submit</button>
    </form>
        <script>
        // disabled 阻止点击事件
        function hello() {
            alert('hello')
        }
    </script>
</body>

最后编辑于：2018.10.11 01:27:38

input 中 readonly 和 disabled 的区别

推荐阅读更多精彩内容