HTML 中 input 属性 disabled 和 readonly

有些表格的 input 不允许用户修改,只做展示作用,这时它有两个属性可供我们选用:disabled 和 readonly。

他们俩都可以实现禁止输入、禁止修改。他们的区别在于disabled无法被选中,input里的值无法被鼠标圈选,并且颜色变灰;而readonly外观看似和正常的input一样,也可以被鼠标圈选,颜色也是正常的,只是不能修改值而已。

上面说的相同与不同只是前端大家可以直接看见的,而后端的不同是:disabled 无法传递input的值,反之 readonly则可以正常传输。所以需要大家注意这点,不要被这个问题导致出现bug。

解决方法:

//在给input加上readonly后,可以增加样式效果,达到disabled 效果:代码如下
background-color: #f0f0f0;//设置背景颜色
cursor: not-allowed;//设置鼠标样式为禁止

需要注意的是:虽然上面增加的效果“像”disabled,但实际上input还是可以被圈选的哦!

如果你有其他见解,欢迎大家给 www.zhuei.cn 留言参与讨论,以便发现错误让我们及时更正!