Input标签

input[disabled],input:disabled,input.disabled{color: #3e3e3e;-webkit-text-fill-color: #3e3e3e;-webkit-opacity:1; opacity: 1; }

最近在写demo的时候遇到一个问题：表单内输入框的值没传到后盾，后盾拿到的数据是null，通过排查，发现起因是我为了使输入框的内容不被用户批改而应用了disabled属性，就导致input的value没有传出，因而后盾没拿到导致的null；因而记录一下（心态崩了呀...）readonly 和 disabled的区别Readonly和Disabled它们都可能做到使用户不可能更改表单域中的内容。然而它们之间有着渺小的差异，总结如下： Readonly只针对input(text / password)和textarea无效，而disabled对于所有的表单元素都无效，然而表单元素在应用了disabled后，当咱们将表单以POST或GET的形式提交的话，这个元素的值不会被传递进来，而readonly会将该值传递进来（readonly承受值更改能够回传，disable承受改但不回传数据）。 个别比拟罕用的状况是： 在某个表单中为用户预填了某个惟一辨认代码，不容许用户改变，然而在提交时须要传递该值，此时应该将它的属性设置为readonly 。 常常遇到当用户正式提交了表单后须要期待管理员的信息验证，这就不容许用户再更改表单中的数据，而是只可能查看，因为disabled的作用元素范畴大，所以此时应该应用disabled，但同时应该留神的是要将submit button也disabled掉，否则只有用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被革除。如果说在这种状况下用readonly来代替disabled的话，若表单中只有input(text / password)和textarea元素，那还是能够的，如果存在其余发元素，比方select，用户能够在从新改写值后按回车键进行提交(回车是默认的submit触发按键) 咱们经常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样能够防止网络条件比拟差的环境下，用户重复点提交按钮导致数据冗余地存入数据库。 disabled和readonly这两个属性有一些共同之处，比方都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合应用这两个属性，其实他们之间是有肯定区别的： 如果一个输出项的disabled设为true，则该表单输出项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输出项都有效，最重要的一点是当提交表单时，这个表单输出项将不会被提交。而readonly只是针对文本输入框这类能够输出文本的输出项，如果设为true，用户只是不能编辑对应的文本，然而依然能够聚焦焦点，并且在提交表单的时候，该输出项会作为form的一项提交。