设置input输入框为只读方法详解
1.1禁用状态与启用状态
一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。一个元素可以被激活或获取焦点,则该元素处于启用状态。
1.2设置input输入框为只读方法
设置文本框为只读,使用户不能修改其中的信息。
例:
,使"中国"两个字不可以修改的方法详解。
1.2.1鼠标放上时失去焦点
方法: onfocus=this.blur()
onfocus事件在对象获得焦点时触发。HTML DOM blur()方法用于从对象上移开焦点。
例:
1.2.2 HTML readonly属性
作用:
readonly属性规定输入字段为只读。
readonly属性可与或配合使用。
语法:
readonly="readonly";
例:
1.2.3 HTML disabled属性
作用:
禁用某一个HTML元素。
disabled属性无法与一起使用。
语法:
disabled="disabled";
例:
1.3 readonly和disabled属性区别详解
disabled属性:
disabled属性禁用HTML元素,禁用的元素既不可用,也不可点击。
disabled属性可在input,button,textarea等起作用。
设置disabled属性后,背景颜色变成淡灰色,绑定的事件,默认的事件,都无法执行。
可通过JS把对应的disabled属性去掉。
readonly属性:
readonly属性规定输入字段为只读,只读字段不能修改。不过,用户仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本。
readonly属性只在可输入的元素框才有效,如input,textarea,对于radio,checkbox,select等元素无效。
设置readonly属性后,背景颜色不会改变,绑定的事件,默认的事件,都可以执行。
可通过JS把对应的readonly属性去掉,将输入字段切换到可编辑状态。
1.4扩展知识之HTML DOM disabled/readOnly 属性
HTML DOM disabled 属性
用法:
disabled属性可设置或返回是否禁用HTML DOM checkbox对象(checkbox对象代表一个选择框)。
语法:
checkboxObject.disabled=true|false;
例:
HTML代码:
JS代码:
document.getElementById("check").disabled=true;
HTML DOM readOnly属性
作用:
readOnly属性设置或返回文本域是否为只读。
语法:
textObject.readOnly=true|false;
例:
HTML代码:
JS代码:
document.getElementById("text").readOnly=true;
1.5扩展知识之:disabled伪类
概述:
:disabled是CSS伪类,表示任何被禁用的元素。
语法:
input:disabled;//选择所有被禁用的输入框
注意:会使所有被禁用的文本输入框具有浅灰色的背景。
例:
input:disabled{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899;
}
HTM