详述input只读属性

在Web开发中，表单是一种非常常见的元素，而input标签作为表单元素的一种，包含了许多属性，其中只读属性（readonly）则是比较重要的一个属性。在本文中，我们将从以下多个方面详细阐述input只读属性。

一、readonly的作用及用法

readonly属性是指的一个只读的输入域，它的作用是可以让用户查看表单元素的值，但无法修改该值。readonly属性一般用于需要显示元素的信息，但又不希望用户随意修改的场景。例如，一个用户名的输入框，在显示用户当前用户名的同时，使用readonly属性，防止用户乱改自己的用户名。

用户名： 

需要注意的是，readonly属性和disabled属性是不同的，disabled属性会禁止用户输入和表单提交，而readonly属性只是禁止用户修改，但仍然可以进行表单提交。

二、只读属性对于表单校验的影响

通常情况下，使用表单验证可以防止用户提交不合法的数据。但当表单元素加上readonly属性时，就需要注意了。

首先需要明确的是，虽然readonly属性使表单元素只读，但是仍然可以通过JS等手段修改该元素的value值，这就会涉及到表单校验的问题。

那么在表单校验时，需要注意的就是readonly属性的表单元素需要禁止用户的输入，但是需要允许JS修改它的value值，这可以通过禁用掉表单验证器，或者手动调用验证器的方式进行。

三、只读属性对于CSS的影响

readonly属性会让使用者不能更改input元素的值，但并不会改变input元素本身的样式和特性。所以，在一些特定的情况下，readonly属性可能会导致某些CSS样式失效。

例如，在一些情况下，readonly属性被滥用，用来代替disabled属性。这时候，在CSS样式中对disabled属性的设置已经失效。

input[readonly] {
    background-color: #eee; 
    /* 只读输入框的背景色 */
    color: #666; 
    /* 只读输入框内字体的颜色 */
    border: 1px solid #ccc; 
    /* 只读输入框的边框样式 */
}
input[readonly]:hover {
    background-color: #eee; 
    /* 只读输入框hover时的背景色 */
    color: #666; 
    /* 只读输入框hover时内字体的颜色 */
    border: 1px solid #ccc; 
    /* 只读输入框hover时的边框样式 */
} 

四、readonly属性在移动端的一些注意事项

在移动端，虽然readonly属性也可以正确地禁止用户的操作，但是需要注意的是，在一些低版本的Android浏览器上，readonly属性有时候会不生效。

这时候，可以采用JS等手段来实现readonly属性的效果，在每次键盘弹起、失去焦点等关键事件时，判定元素是否为readonly，并根据结果进行相应的处理。例如：

使用onfocus="this.blur()"的方式，可以在元素获取焦点后，立即获得焦点，并且自动失去焦点，达到了禁止用户修改的效果。

五、readonly属性的草率使用可能带来的风险

虽然readonly属性在保护表单元素的数据完整性方面是非常有效的，但是如果草率使用该属性，就可能会导致其他问题。

例如，readonly属性的表单元素仍然可以被JS、jQuery等库修改。如果在JS中对其进行修改，就可能会导致表单元素的值和UI上的信息不一致，进而导致数据错误等问题。

更为严重的是，如果readonly属性被滥用，用于代替disabled属性，这就会导致表单元素失去原有的语义性。有些浏览器甚至会将readonly属性的表单元素显示为可编辑的形式，进而混淆使用者的界面体验。

六、小结

本文介绍了input只读属性readonly的作用及用法、只读属性对于表单校验、CSS样式、移动端的一些注意事项以及草率使用只读属性可能带来的风险等多个方面的详细内容。readonly属性对于表单元素的保护具有重要的作用，但是需要结合实际情况准确使用，避免 misuse。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com