html input readonly 和 disable的区别

Readonly和Disabled它们都可以作到使用户不可以更改表单域中的内容。可是它们之间有着微小的差异,总结以下:

     Readonly只针对input(text / password)和textarea有效,而disabled对于全部的表单元素都有效,可是表单元素在使用了disabled后,当咱们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改能够回传,disable接受改但不回传数据)。javascript

 

通常比较经常使用的状况是:html

  1. 在某个表单中为用户预填了某个惟一识别代码,不容许用户改动,可是在提交时须要传递该值,此时应该将它的属性设置为readonly 。
  2. 常常遇到当用户正式提交了表单后须要等待管理员的信息验证,这就不容许用户再更改表单中的数据,而是只可以查看,因为disabled的做用元素范围大,因此此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,不然只要用户按了这个按钮,若是在数据库操做页面中没有作完整性检测的话,数据库中的值就会被清除。若是说在这种状况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那仍是能够的,若是存在其余发元素,好比select,用户能够在从新改写值后按回车键进行提交(回车是默认的submit触发按键)
  3. 咱们经常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样能够防止网络条件比较差的环境下,用户反复点提交按钮致使数据冗余地存入数据库。

disabled和readonly这两个属性有一些共同之处,好比都设为true,则form属性将不能被编辑,每每在写js代码的时候容易混合使用这两个属性,其实他们之间是有必定区别的:java

  • 若是一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的全部操做(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。而readonly只是针对文本输入框这类能够输入文本的输入项,若是设为true,用户只是不能编辑对应的文本,可是仍然能够聚焦焦点,而且在提交表单的时候,该输入项会做为form的一项提交。 

摘自  春哥也编程 http://www.cnblogs.com/zcy_soft/archive/2011/09/19/2181211.html    感谢大神数据库

相关文章
相关标签/搜索