第一部分
1.在js中直接使用form.submit()不会调用submit事件,因此要先验证,而form.reset()跟用DOM2级别来写一样都会触发reset事件
2.重置表单的需求很少见,比之常见的做法是提供一个取消按钮
3.以下是第一次单击按钮后禁用提交按钮
EventUtil.addHanlder(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements[0];
//禁用它
btn.disabled = true;
}); 这里使用submit而不用onclick的原因在于submit在不同的浏览器可先于或后于onclick
4;HTML5为表单字段新增了一个autofocus属性。在支持这个属性的浏览器中。只要设置这个属性,不用javascript就能自动把焦点移到相应字段写法如:<input type ="text" autofocus/> 支持它的有firefox4+ safari5+ chrome opera9.6
5.默认情况下,只有表单字段可获焦点,对于其他元素而言,如果先将其tabIndex属性设置为-1 再调用focus()方法,也可让元素获得焦点
6.关于blur 和change事件的关系 ,它们执行的先后顺序是不确定的,不受代码先后顺序的影响。
第二部分 HTML5约束验证API
1.必填字段:required属性 如<input type="text" name="username" required/> 这个属性使用于<input> <textarea> <select>
2.检测有效性:代码如下
<body>
<form>
<input type="number" min="0" max="100" step="5" name="count" />
<input type="button" onclick="a()" value="submit"/>
</form>
<script>
function a(){
if(document.forms[0].elements[0].checkValidity()){
alert("有效");
} else {
alert("无效");
}
}//此代码在chrome safari opera 可执行 火狐未完全实现 IE有错
</script>
</body>
第三部分 选择框脚本
HTMLSelectElement类型提供以下属性和方法;
add(newOption, relOption) :向控件中插入新<option>元素,其位置在相关项(relOption之前)
multiple: 布尔值,表示是否允许多项选择;等价HTML的multiple特性。
options:控件中所有的<option>元素的HTMLCollection。
remove(index):移除给定位置的选项。
selectIndex:基于0的选中项的索引,如果没有选中项则值为-1.对于支持多选的控件,只保存选中项的第一项索引。
size:选择框中可见的行数;等价于HTML中size特性。
HTMLOptionElement对象添加了下列属性
index:当前选项在options集合中的索引
label:当前选项的标签,等价于HTML中的label特性。
selected:布尔值,表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
text:选项的文本; value:选项的值。
可以使用下面方法来找值:
var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
注意:选择框的change事件与其他表单字段的change事件触发条件不一样。其他表单字段的change事件是在值被修改且焦点离开当前字段时触发。而选择框的change事件只要选中了选项就会触发。