[align=center]设置input输入框为只读方法详解[/align] 


[b]1.1禁用状态与启用状态[/b] 

 一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。一个元素可以被激活或获取焦点，则该元素处于启用状态。 

[b]1.2设置input输入框为只读方法[/b] 

 设置文本框为只读，使用户不能修改其中的信息。 

例： 

 <input type="text" value="中国">，使"中国"两个字不可以修改的方法详解。 

[b]1.2.1鼠标放上时失去焦点[/b] 

方法: οnfοcus=this.blur() 

 onfocus事件在对象获得焦点时触发。HTML DOM blur()方法用于从对象上移开焦点。 

例： 

 <input type="text" value="中国" οnfοcus=this.blur()> 

[b]1.2.2 HTML readonly属性[/b] 

作用： 

 readonly属性规定输入字段为只读。 

 readonly属性可与<input type="text">或<input type="password">配合使用。 

语法： 

readonly="readonly"; 

例： 

 <input type="text" value="中国" readonly> 

 <input type="text" value="中国" readonly="readonly"> 

[b]1.2.3 HTML disabled属性[/b] 

作用： 

 禁用某一个HTML元素。 

 disabled属性无法与<input type="hidden">一起使用。 

语法： 

 disabled="disabled"; 

例： 

 <input type="text" value="中国" disabled> 

 <input type="text" value="中国" disabled="disabled"> 

[b]1.3 readonly和disabled属性区别详解[/b] 

disabled属性： 

 disabled属性禁用HTML元素，禁用的元素既不可用，也不可点击。 

 disabled属性可在input，button，textarea等起作用。 

 设置disabled属性后，背景颜色变成淡灰色，绑定的事件，默认的事件，都无法执行。 

 可通过JS把对应的disabled属性去掉。 

readonly属性： 

 readonly属性规定输入字段为只读，只读字段不能修改。不过，用户仍然可以使用tab键切换到该字段，还可以选中或拷贝其文本。 

 readonly属性只在可输入的元素框才有效，如input，textarea，对于radio，checkbox，select等元素无效。 

 设置readonly属性后，背景颜色不会改变，绑定的事件，默认的事件，都可以执行。 

 可通过JS把对应的readonly属性去掉，将输入字段切换到可编辑状态。 

[b]1.4扩展知识之HTML DOM disabled/readOnly 属性[/b] 

[b]HTML DOM disabled 属性[/b] 

用法： 

 disabled属性可设置或返回是否禁用HTML DOM checkbox对象(checkbox对象代表一个选择框)。 

语法： 

 checkboxObject.disabled=true|false; 

例： 

HTML代码： 

 <input type="checkbox" id="check" /> 

JS代码： 

 document.getElementById("check").disabled=true; 

[b]HTML DOM readOnly属性[/b] 

作用： 

 readOnly属性设置或返回文本域是否为只读。 

语法： 

 textObject.readOnly=true|false; 

例： 

HTML代码： 

 <input type="text" id="text" value="Hello World!" /> 

JS代码： 

 document.getElementById("text").readOnly=true； 

[b]1.5扩展知识之:disabled伪类[/b] 

概述： 

 :disabled是CSS伪类，表示任何被禁用的元素。 

语法： 

 input:disabled;//选择所有被禁用的输入框 

[color=red]注意：会使所有被禁用的文本输入框具有浅灰色的背景。[/color] 

例： 

input:disabled{ 

 border: 1px solid #DDD; 

 background-color: #F5F5F5; 

 color:#ACA899; 

} 

HTM