readonly 和 disable 的总结

今天在整理一个EasyUI框架的时候,需要用到设置输入框的disable属性。但是由于EasyUI自身的原因,导致disable属性无法生效,使用readonly就能够正常显示,原因是由于引用的插件validatebox.js导致输入框重新加载时取消了disable属性。

在网上查阅资料发现readonly 和 disable虽然都是禁止编辑,但是也有一些细微的差别。

disabled对于所有的表单元素都有效,但是readonly只针对input(type=text/password)和textarea有效。如果在表单当中,提交表单的话disabled不会被传递,而readonly可以传递到后台。

仔细看了两种属性的区别,发现在日常使用过程中还是有一定的好处:

我们在提交某些表单的时候,有的选项不能够让用户修改,但又需要显示出来的时候,我们就可以把该项设置为readonly

有时候我们开发好一个表单后,对于权限较高的用户来说可以查看和修改表单里面的数据,而对于一部分用户来我,我们往往只希望他拥有查看的权限就够了,这时候我们就可以把整个表单设置为disable,如$(“#fm”).form(“disable”);然后配合把提交按钮也隐掉就能完美实现了。

使用disable还可以防止用户多次提交。

另外还有一个细小的差别就是设置为readonly的元素可以获得光标的焦点,而disable不行。