JavaScript高级程序设计第14章表单脚本（学习笔记）

第十四章表单脚本

1.阻止默认表单提交

1.提交表单数据

1.使用type=submit提交按钮

2.使用submit()：方法

注意：当用户点击提交按钮时，会触发submit事件，从而在这里我们有机会验证数据并决定要不要提交表单

1.preventnDefault(event):可以用在表单数据无效时不发给服务器，对于动态绑定的onclick 事件。

2.Submit（）方法也可以提交表单，但是不会触发submit事件，所以在使用时须先验证表单数据，

如：<%
response.write(trim(request.form("a")))
%>
<form name="myform" method="post" action="">
<input name="a" value="abc"><br>
<input type="submit" value="提交1" onClick="return checkform()">//onClick="return checkform()" IE可以阻止,FF可以阻止<br><br>
<input type="submit" value="提交2" onClick="checkform()">//onClick="checkform()" IE无法阻止,FF无法阻止<br><br>
<input name="submit3" type="submit" value="提交3">//submit3.attachEvent("onclick",checkform) IE可以阻止,FF无法阻止<br><br>
如果是直接写在onclick里面，我们直接用return checkform()就好了。<br>
问题是有时候，我们又不乐意写在DOM元素里，非要搞什么动态绑定click事件。<br>
动态绑定click事件请看提交3，IE可以阻止，FF无法阻止，浏览器不兼容！<br><br>

<input type="submit" value="提交4" onClick="checkform_success(event)">//onClick="checkform_success(event)" IE可以阻止,FF可以阻止<br><br>
<input name="submit5" type="submit" value="提交5">//submit5.attachEvent("onclick",checkform_success) IE可以阻止,FF可以阻止<br><br>
</form>
<script>
if(document.all){//ie
document.myform.submit3.attachEvent("onclick",checkform);
document.myform.submit5.attachEvent("onclick",checkform_success);
}else{//ff
document.myform.submit3.addEventListener("click",checkform,false);
document.myform.submit5.addEventListener("click",checkform_success,false);
}
function checkform(){

if(document.myform.a.value=="abc"){

alert("验证不通过！");

returnfalse;

}

}
function checkform_success(e){
e=e||window.event;
if(document.myform.a.value=="abc"){
alert("验证不通过！");

if(document.all) e.returnValue=false;//ie,window.event.returnValue=false阻止元素默认行为
else e.preventDefault();//火狐,event.preventDefault阻止元素默认行为
}
}
</script>

return false不是取消事件冒泡，而是取消“浏览器默认行为”。比如一个链接<a href="http://zhidao.baidu.com">百度知道</a>当我们点击这个链接时，浏览器会自动跳转到：zhidao.baidu.com这个地址，这是浏览器的默认行为，如果我们这么做：<a href="http://zhidao.baidu.com" onclick="return false">百度知道</a>那么再次点击这个链接时，浏览器则不会进行跳转。

JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。而该值决定了当前操作是否继续。当返回的是true时，将继续操作。当返回是false时，将中断操作。而直接执行时（不用return）。将不会对window.event.returnvalue进行设置所以会默认地继续执行操作详细说明如下：例如：当在 <a href="abc.htm" onclick="return add_onclick()">Open</a> 中如果函数 add_onclick() 返回 true, 那么页面就会打开 abc.htm否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外

2.重置表单数据

当用户点击重置按钮时，会触发reset事件，从而在这里我们有机会验证数据并决定要不要重置表单

3.访问表单方法

1.可以通过DOM访问表单（通过给表单添加Id来访问）

2.可以通过evements属性（该属性是所有表单元素的集合）类似数组，

a) 类如：获取表单中的打一个字段：

Var field=forn.evements[0]

4.表单共有属性

a) Disabled:布尔值，表示当前字段是否被禁用

b) Form:指向当前字段所属表单的指针，只读

c) Name:当前字段的name

d) readOnly:布尔值，表示当前字段是否只读

e) tabIndex:表示当前字段的切换（tab）序号

f) Tyep：当前字段的类型，如“checkbox ,radio”等

g) Value:当前字段要被提交到服务器上的值。

5.表单的共有方法

a) Focus():获得焦点

b) Blur():失去焦点

6.表单的事件

a) Blur:当失去焦点时触发

b) Change:对于<input>和<textarea>元素，在他们失去焦点且value的值改变时触发，对于<select>元素在其选项改变时触发

c) Focus:当前字段获得焦点时触发。

7.选择文本select（）方法

1.在调用select方法时，大多数浏览器都要把焦点设置在文本框中，

2.Select事件：在选择文本框中的文本时就会触发此事件，在调用select（）方法时也会触发此事件。

3.取得选择的文本属性：

a) selectionStart，

b) selectionEnd:

因为substring（）方法是基于字符串的偏移量操作，所以将selectionStart，selectionEnd传递给它就可以取得选中文本。

如：function getSelectedText(text){

Return textbox.value.substring(selectionStart,electionEnd);

}

8.过滤输入

1.根据keypress事件和preventnDefault()阻止默认行为可以判断屏蔽输入的字段，

如：keypress=function(event){

If（输入的不符合）{

执行：event.preventnDefault()

}

9.选择框脚本

1.独有的属性和方法

a)add(newOption,relOption)向控件中插入新<optioon>其位置在 relOption之前；

b)Multiple:布尔值，表示是否允许多项选择，

c)Remove（index）移除给定位置的选项，

d)selectedIndex:基于0的选项的索引，如果没有选中项则返回值为-1.对于支持多选的控件，只保存选项中的第一项索引，

e)Size:选项中可见的行数

注意：1.如果没有选中项，则选择框的value属性保存空字符串

2.如果有一项被选中，而且该项的value属性已经在HTML中被指定，则选择框的value属性等于选项中的value特性，即使value的特性值是空字符串，也同样遵循此条规则。

3.如果有一项被选中，该项的value属性在HTML中未被指定，则选择框的属性等于该项文本

4.如果有多项选中，则选择框的value属性将依据前两条规则取得第一选中项的值。以下

<option value=”sunnyvale，ca”>sunnyvale</option>

<option value=”Los Anggeles ,CA”>sunnyvale</option>

<option value=””>china</option>
<option>Australia</option>

如果用户选择了其中一项，则选项框的值是sunnyvale，ca,如果文本为“China”被选中，则选项框的值为空因为其value特性是空，如果选择最后一项，那么由于<option>中没有value特性所以选项框的值为Australia

2.option的属性

在DOM中每个<option>都有个HTMLOptionElement对象为便于访问数据，它具有以下属性：

a)index:当前选项option集合中的索引。

b)Label: 当前选项的标签

c)Selected:布尔值表示当前选项是否被选中，将这个属性设置为ture时可以选中当前选项。

d)Text:选项的文本

e)Value:选项的值。

3.选择选项

a)对于只选择一项的选择框，访问选中项的方式，就是使用selectesIndex属性

b)对于多选的选项框

取得某一项的索引，然后将其selected的属性设为ture,在允许多选的选项框中设置选项的selected属性，不会取消对其他选中项的选择。因此可以动态地选择任意多项，实际上selected的作用就是确定用户选择了哪一项，要取得所有选中的项，可以循环便利选项集合，然后测试每个选项的selected的属性。

4.添加选项

a) 使用Dom方法

Var newOption=document.createElement(“option”) //创建option节点

newOption.appendChild(document.createTextNode(“option text”));

//给节点插入文本内容

newOption.setAttribute(“value”,Option value) //设置节点的属性

selectbox.appendChild(newOption) //把该节点插入到selectbox.)

b)使用option构造函数

此函数接受两个参数：文本（text）和值（value）

Var newOption=new Option(“Option text”, “Option value”)

selectbox.appendChild(newOption);不适用于Ie

c)add()方法

两个参数：要添加的新选项和将位于新选项之后的选项，第二个参数可选，兼容DOMl浏览器要求第二个参数必须写，而且如果指定，该参数必须是新选项之后的索引，如设置为undefined，就可以在所有浏览器中都将新选项插入列表左后。

Var newOption=new Option(“Option text”, “Option value”)

selectbox.add(newOption,undefined);

5.移除选项

a）selectbox.removeChild(selectbox.option[0])移除第一项

b）Selectbox.remove(0)

c）selectbox.option[0]=null