Readonly属性有啥用？（readonly属性如何设置）

本人是公司某一基础组件库的研发，这个话题来源于一次是否要对自定义的表单组件支持readonly属性的一次讨论readonly的用处我们先看看readonly属性的一些信息定位readonly用于表示表单控件不可变，即不可被用户修改。

具体表现如果一个input元素加了readonly属性, 那么对它会有以下几点影响：不允许用户修改值；会被添加伪类:read-only（相对应的，如果没加readonly，则会有这个伪类:read-write

）；不会参加表单校验能用在哪些元素上？readonly属性只能用于文本输入的表单控件，即input和textarea，另外input的type也必须为text|url|email|search|...等这几种文本输入，input[type=file] input[type=radio]这种也是不行的。

select/button这种表单控件不支持readonly，因为readonly的效果跟disabled一样，可以使用disabled属性与Disabled的不同那么readonly和disabled到底有啥不同呢？简要说有这么几点：。

readonly态的表单项会被提交，disabled态的不会这是最明显的差异；readonly态的元素能被focus, disabled态的不能；readonly态的元素能触发点击事件，disabled态的不能；。

disabled态的表单元素往往会被浏览器加上特殊样式，如灰色背景等，readonly不会个人的一些思考1. 业务上的使用场景比较有限，原因有以下几点：跟禁用态区分有限，大部分场景能用禁用态解决；readonly属性能用的元素比较少，只能用于input和textarea，在复杂表单中，往往也会有select元素不允许修改的场景；。

跟正常表单项默认样式一致，却不允许修改，可能会带来用户额外的困扰；是否能给select也封装readonly呢，抱歉，至少Antd等组件库未给select添加（相关讨论） 2. 一些禁用态表单来做详情展示的是否可以考虑readonly呢。

？ 显然可以的，原因有三：表单详情页如果用禁用态表单往往满屏灰底输入框，比较丑；有些浏览器disabled态输入框，内容无法被选中；没法focus这一点，对无障碍阅读以及习惯用Tab键的人不友好参考https://

html.spec.whatwg.org/multipage/input.html#the-readonly-attribute