html中输入框为只读状态如何设置

在设计网页时，有时需要将输入框设置为只读状态，即其中的内容不可编辑，实现这种设计的方法有两种：
使用input的disable和readonly两个属性。
先来看下二者的区别：


可以看到，虽然两种都是让input的内容不能被用户编辑，但是对于后期的美工处理就有问题了！
例如：

​