表单脚本

第一部分

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事件只要选中了选项就会触发。

posted @ 2012-08-17 13:54  陆航  阅读(219)  评论(0编辑  收藏  举报