理解Input元素的readOnly与disabled属性
readOnly属性的作用：
readOnly属性可以将一个输入框设置为只读模式，使其内容无法被更改。例如，有时我们需要在表单中展示一些只读的信息，这时就可以设置为只读模式，以防止用户无意中更改数据。
disabled属性的作用：
disabled属性可以将一个输入框设置为禁用状态，使其无法编辑。与readOnly不同的是，disabled会禁用整个元素，包括提交表单的功能和其他的事件，这时用户无法更改其任何值。而且，disabled的元素会被浏览器跳过，不会参与后续JS代码的执行，这需要开发者牢记。
readonly与disabled的异同点：
相同点是：它们都可以使元素不能够编辑，对用户的操作做出限制。但它们也有区别，主要体现在以下几个方面：
- 光标：readOnly元素的光标可以在其中移动，但是其内容无法编辑。而disabled元素的元素不会显示光标，无法进行任何更改。
- 表单提交：readOnly的元素参与表单提交，可以提交数据给后台。但是disabled的元素不参与表单提交，因为表单数据会被这些元素阻止。
- 属性值：readOnly元素的值可以通过JS代码更改，disabled元素的JS代码会被浏览器跳过，因此不可更改。
使用readOnly还是disabled：
使用哪一个属性，要根据具体情况来看。如果需要展示内容，但是不允许用户更改，则使用readOnly属性；如果需要用户完全不能编辑输入框，包括光标都不允许出现，则使用disabled属性。
值得注意的是，在开发中要合理使用这两种属性，一味的禁止或者只读可能会压制用户的行为和创造力，降低交互的舒适度和满意度。因此，在UI设计时，要结合实际应用场景，灵活运用readOnly和disabled属性，不断提高用户体验。