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

时间:2021-12-19 10:19:52

第十四章 表单脚本

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>

<!--以下两个是解决方案,提交4是直接写在onclick里面,提交5是动态绑定事件的情况 -->
<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属性将依据前两条规则取得第一选中项的值。以下

<select>

<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