input的几个基本属性-禁用、只读和隐藏

之前在处理一个问题(禁止用户更改日期),把一个 input 设置成 disabled=”disabled”,导致日期没有根据 Form 提交到后端。
后来在公司的前端工程师面试题里发现也有这么一道题:

input的两种类型,readonly和disabled有什么区别?

居然大多数在职的工程师都不了解,这让我很惊讶,所以决定写下这篇扫盲文章。

对于 disabled 和 readonly 两个属性,W3C: Disabled and read-only controls 是这样讲的:

In contexts where user input is either undesirable or irrelevant, it is important to be able to disable a control or render it read-only. For example, one may want to disable a form’s submit button until the user has entered some required data. Similarly, an author may want to include a piece of read-only text that must be submitted as a value along with the form. The following sections describe disabled and read-only controls.

另外一句是(也是这次掉坑的原因):

In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.

对于 type=”hidden” 大家都比较熟悉了。理解这这两句话,其他的就只是常识层面上的运用了:

  1. 禁用(disabled):value 不会在 Form 提交时发送出去。这个对于按钮来说用处比较大,一般的 type=”text” 最好是隐藏,而不是禁用,因为它不需要发送数据。
  2. 只读(readonly):value 会在 Form 提交时被发送出去。所以需要在外观上显示跟一般 input/textarea 一样,但不允许用户修改数据,可以用这个属性。
  3. 隐藏(hidden):这个比较好理解,value 会被发送,并且用户看不到。

这是技术上的理解,但技术这种东西永远都会有盲目,所以如何去做?用脚趾头想的做法就是强制测试,或者成立专门的测试团队。当然,用脚趾头想也知道这种做法让流程变得很复杂,开发速度会变慢,放松测试则可能出现 bug 情况更多。一方面是得罪用户,一方面是公司效率变差,都边都不好,如果平衡?