Readonly属性有啥用？（readstate属性）

 

本人是公司某一基础组件库的研发，这个话题来源于一次是否要对自定义的表单组件支持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