JavaScript总结(七)
JavaScript表单编程
表单是Web上与用户进行交互的主要界面。则我们需要掌握如何访问用户输入的表单数据,校验用户输入的正确性显得至关重要。
♞ 对Form元素进行脚本编写
✍ 获取表单的应用
➣ 使用DOM树中定位一个元素的方法——getElementById()方法,并将表单的ID作为方法的参数;
var objForm = document.getElementById("form");
➣ 使用文档的表单集合,并且通过表单在forms集合中的位置或者通过其name属性;
var objForm = document.forms[0]; //不用下标就是获得表单集合 var objForm = document.forms["name"];//得到名为name的表单
✍ 获取表单的字段
每个表单字段都包含在表单的elements集合中,我们可以通过使用表单元素的name属性或者它在集合的位置,访问集合中的不同字段;
➣ 通过它在集合的位置访问集合中字段;
var temp=oform.elements[0]; //得到表单第一个字段。
➣ 使用表单元素的name属性访问集合中字段;
对该方法传入name属性的字符串;
var temp=oform.elements["text"]; //得到名为text1的字段。
每个表单字段称为表单本事的一个属性,可以直接通过其名称访;
var temp=oform.textbox1; //得到名为textbox1的字段。
如果名称中间有空格,可以用中括号代替;
var temp=oform["text box 1"]; //得到名为text box 1的字段。
✍ 表单字段元素对象
➣ form表单字段元素对象的方法
方法 |
描述 |
blur() |
让表单字段元素失去焦点,当前焦点移到后台 |
focus() |
让表单字段元素获得焦点 |
click() |
模仿用户鼠标单击该元素的过程 |
setCapture() |
在某个表单字段元素对象上捕获当前网页文档上的鼠标事件 |
releaseCapture() |
取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置 |
add() |
为列表框(select)增加一个选择项(option) |
➣ form表单字段元素对象的属性
属性 |
描述 |
defaultValue |
设置或返回表单字段元素的默认值(初始值) |
disabled |
设置或返回文本输入框的disabled状态;该属性用于指示一个表单控件是否可用,一个disable控件不允许用户输入 |
form |
返回表单字段元素所属于form表单对象 |
readOnly |
设置或返回文本输入框的readonly状态 |
title |
设置或返回表单字段元素title属性 |
value |
设置或返回表单字段元素的当前取值 |
checked |
设置或返回单选按钮、复选按钮的选中状态 |
➣ form表单字段元素对象的事件
事件 |
描述 |
onChange |
当焦点离开文本输入框且文本输入框中的值改变时,或者改变列表框的选择结果后,产生该事件 |
onSelect |
当单行或多行文本输入框中的文字被选择加亮后,产生该事件 |
onFocus |
当表单字段获得焦点时,产生该事件 |
onBlur |
当表单字段元素失去焦点时,产生该事件 |
✍ 表单的提交和重置
➣ 使用一个提交按钮或者模拟提交按钮的图形来提交/重置表单
<input type="submit" value="Submit"/> //submit按钮提交表单 <input type="image" value="submit.gif"/> //image按钮提交表单 <button type="submit">Submit</button> //submit按钮提交表单 <input type="reset" value="Reset"/> //reset按钮重置表单 <button type="reset">Reset</button> //reset按钮重置表单
➣ 使用submit()方法或者reset()方法提交/重置表单
得到表单引用后,直接调用submit()方法或者reset()方法
oForm.submit(); //oForm表单提交 oForm.reset(); //oForm表单重置
♞ 对文本框元素进行脚本编写
✍ 获取/更改文本框的值
对于标签<input/>和<textarea/>都支持同样的属性value,以获取文本框中的文本;使用value属性返回String类型的文本内容;
✍ 选择文本
两种类型的文本框都支持select()方法,该方法用于选择文本框中的所有文本。为使该方法起作用,文本框必须获得焦点。为确保文本框获得焦点,我们必须在调用select()方法之前,调用另外一个方法focus();
✍ 文本框事件
两种文本框都支持blur、focus、change和select事件。
➣ change事件——在用户改变文本框的值之后,当文本框失去焦点时触发该事件。
(PS:通过设置value属性改变文本框的值时,不触发该事件)
➣ select事件——在一个或者多个字符被选中时触发事件;不管是手动选中还是使用select()方法。
➣ blur事件——当文本框失去焦点时触发事件;
(PS:blur事件和change事件都是在文本框失去焦点后触发,但是change事件是在文本框的值被改变的情况下才会触发,如果没有改变时只触发blur事件;改变时则先触发change事件,随后再执行blur事件);
➣ focus事件——当文本框获得焦点时触发事件;
♞ 对列表框和组合框进行脚本编写
✍ 访问选项
HTML DOM将select元素中的每一项定义到一个options集合中,该集合中列出select控件中的所有option元素。
属性 |
描述 |
id |
设置或返回选项的 id。 |
index |
返回下拉列表中某个选项的索引位置。 |
label |
设置或返回选项的标记 (仅用于选项组)。 |
selected |
设置或返回 selected 属性的值。 |
text |
设置或返回某个选项的纯文本值。 |
value |
设置或返回被送往服务器的值。 |
✍ 添加选项
很多时候,列表框或者组合的选项数据,是来自于后台数据服务器或者其它数据文件,那么我们就不能在XHTML中指定选项,必须使用JavaScript编码动态地将数据项添加到select元素中,按照以下步骤将选项动态添加到select元素中:
Ⅰ 定义一个带三个参数的方法,这三个参数分别是要添加选项的列表值、要添加的选项的名称以及要添加的选项的值;
Ⅱ 使用DOM方法创建一个option元素,然后创建一个文本节点分配给选项的名称;
Ⅲ 设置option元素的value属性;
Ⅳ 通过appendChild()方法,将新选项添加到select元素中;
ListUtil.add = function(oList, sName, sValue){ var option = document.creatElement("option"); option.appendChild(document.creatTextNode(sName)); if(arguments.length == 3){ option.setAttribute("value",sValue); } oList.appendChild(potion); }
✍ 删除选项
删除选项的方法有两种,一种是使用DOM提供的功能,一种是使用HTML DOM提供的功能
➣ BOM:使用options集合,将要移除的选项设置为null;
oList.options[0] = null;
➣ HTML DOM:使用select元素的remove()方法,将要删除的选项的索引传递给remove()方法;
oList.remove(0);
✍ 移动选项
使用DOM的appendChild()方法,可以从第一个列表框中把元素移动选项到第二个列表框中。如果我们传递一个文档中的一个元素到appendChild()方法,该元素就会从它的父元素中移除,并且放在指定位置。
♞ 对复选框和单选框进行脚本编写
属性/方法 |
描述 |
checked |
布尔值,指示控件状态 |
defaultChecked |
布尔值,指示页面加载时控件是否被选中 |
click() |
模仿按钮点击,改变控件状态,对应的事件onclick |
我不作恶
但有权拒绝为善
我不赞同
但是我捍卫你不为善的权力