表单事件是由HTML表单内部的动作触发事件,适用于所有的HLML5元素,主要用于表单元素中。表单事件属性如下所示:
onblur :当元素失去焦点时触发事件
onchange :当元素改变时触发事件
oncontextmenu :当触发上下菜单时触发事件
onfous:单元素获得焦点时触发事件
onformchange :当标的改变时触发该事件
onforminput:当表单获得用户输入时触发事件
oninput :当元素获得用户输入时触发事件
oninvalid: 当元素无效时触发事件
onblur :当元素失去焦点时触发事件
onchange :当元素改变时触发事件
oncontextmenu :当触发上下菜单时触发事件
onfous:单元素获得焦点时触发事件
onformchange :当标的改变时触发该事件
onforminput:当表单获得用户输入时触发事件
oninput :当元素获得用户输入时触发事件
oninvalid: 当元素无效时触发事件
onselect :当选取元素时触发事件
onsubmit 当提交表当时触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单事件实例</title>
<script type="text/javascript">
function p1(obj){
obj.select();
obj.style.color="#000";
}
function p2(obj){
if(obj.value==""){
obj.value=="请选择城市"
obj.style.color="#999";
}
}
function p3(obj){
document.getElementById('text1').value=obj.value
document.getElementById('text1').style.color="#000";
}
</script>
</head>
<body>
<input type="text" id="text1" onfous="p1(this)" value="选择城市"
style="color:#999" οnblur="p2(this)">
<select type="select" name=s1 οnchange="p3(this)">
<option selected value="北京">北京</option>
<option value="上海">上海</option>
<option value="福建">福建</option>
</select>
</body>
</html>
当输入框text1获取焦点时,选中其中的文本,输入框text1的颜色变为黑色:当光标离开输入框text1时,如果它的内容为空,则修改其值为“选择城市”,字体颜色为灰色。但从下拉列表选择不同的城市时,在文本中显示选中的城市,并将字体颜色变为黑色。