表单form中readonly只读和 disabled不可选的异同（超详细 附应用场景）

表单中readonly和 disabled的异同（超详细）：

好久没有写博客了，最近在学习前端框架 会陆续把一些需要注意的点补上。好了 切入正题。。。

--------------------------------分割线-----------------------------------------

相同点：两者都是用在表单中的两个属性，它们都能够使用户不能更改表单域中的内容。

区别如下：

1. 作用范围不同：

   Readonly只对input(text / password)和textarea有效，
   而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。

2. 对元素的影响程度不同、

   disabled属性阻止对元素的一切操作，如获取焦点，点击事件等；
   readonly属性只是将元素设置为只读，其他操作正常；

3. 表单提交：

   当为disabled，当表单以POST或GET的方式提交时表单元素的值无法被提交；
   而为readonly 会将该值传递出去；
   （这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的）。

一般比较常用的情景：

1. 在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提 交时需要传递该值，此时应该将它的属性设置为readonly。

2. 经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled。

   注意：但同时应该注意的是要将submit button 提交按钮 也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。

   如果说在这种情况下用readonly来代替disabled的话，
   若表单中只有input(text/password)和textarea元素，那还是可以的，
   如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交（回车是默认的submit触发按键）。

   我们可以在用户按了提交按钮后，利用javascript将提交按钮再disabled掉，这样可以防止用户反复点提交按钮，导致数据冗余地存入数据库。

--------------------------------分割线-------------------------------------------------------------------

写完了 发现写博客也不是那么麻烦 以前嫌麻烦，碰到知识点直接就写在代码的注释上了，哈哈 以后要记在博客上了呦。