按钮对象 (button) 当 JavaScript 读到 <INPUT> 标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中 按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值 ]. 属性 document.forms[ 索引值 ].elements[ 索引值 ]. 方法 ( 参数群 ) 或 document. 表单名称. 按钮对象名称. 属性 document. 表单名称. 按钮对象名称. 方法 ( 参数群 ) 1 1
按钮对象 (buttom) 2. 常用属性 name: 按钮对象的名字 value: 按钮上显示的值 type: 按钮类型 (button submit reset) 3. 常用方法 blur() 把焦点从该对象上移开 focus() 把焦点移到该对象上 click() 再该对象上单击鼠标左键 4. 事件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 2 2
多行文本对象 (TEXTAREA) 当 JavaScript 读到 <TEXTAREA> 标记时, 自动建立一个文本区域对象, 并将 该对象放到表单对象的 elements 数组当中 1. 使用文本对象的格式 document.forms[ 索引值 ].elements[ 索引值 ]. 属性 document.forms[ 索引值 ].elements[ 索引值 ]. 方法 ( 参数群 ) 或 document. 表单名称. 文本区域对象名称. 属性 document. 表单名称. 文本区域对象名称. 方法 ( 参数群 ) 3 3
多行文本对象 (TEXTAREA) 2. 属性 name: 该对象的名字 (NAME 属性 ) defaultvalue: 该对象的缺省值 (VALUE 属性初值 ) value: 该对象的当前值 (VALUE 属性值 ) rows: 设置文本域对象的最大可视行数 cols: 设置文本域对象的最大可视列数 3. 方法 blur() 把焦点从文本框移开 focus() 把焦点移到文本框 select() 将该对象设置成选取状态 4. 事件 onblur onchange onfocus onselect onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 4 4
<Script> document.title = " 多行文本对象示例 "; 多行文本对象 function istoolong(elm) { if (elm.length > 50) { alert(" 留言内容太长, 请修改后再发送..."); return false; } else { meswin=open("","","width=200,height=100"); meswin.document.write(elm); } } </script> <FORM onsubmit="return istoolong(this.msg.value)"> <TEXTAREA name="msg" cols="30" rows="5" onfocus="this.value=''"> 欢迎留言, 不过请长话短说...</TEXTAREA ><BR> <INPUT TYPE="submit" VALUE=" 留言完毕 "> </FORM> 举例 5 5
单选按钮对象 (radio) 当 JavaScript 读到 <INPUT> 标记中的 type 属性值为 radio 时, 自动建立一个单选按钮对象, 并将该对象放到表单对象的 elements 数组当中 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值 ]. 属性 document.forms[ 索引值 ].elements[ 索引值 ]. 方法 ( 参数群 ) 或 document. 表单名称. 单选按钮对象名称. 属性 document. 表单名称. 单选按钮对象名称. 方法 ( 参数群 ) 6 6
单选按钮对象 (radio) 2. 属性 name: 单选按钮对象的名字 (NAME 属性 ) checked: 设置单选按钮是否被选中 length: 返回单选按钮的个数 type: 设置单选按钮的类型 (radio) value: 返回单选按钮的值 3. 方法 blur() 把焦点从该对象上移开 focus() 把焦点移到该对象上 click() 在该对象上单击鼠标左键 7 7
单选按钮对象 4. 事件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 8 8
复选框对象 (checkbox) 当 JavaScript 读到 <INPUT> 标记中的 type 属性值为 checkbox 时, 自动建立一个复选框对象, 并将该对象放到表单对象的 elements 数组当中 1. 使用复选框对象的格式 document.forms[ 索引值 ].elements[ 索引值 ]. 属性 document.forms[ 索引值 ].elements[ 索引值 ]. 方法 ( 参数群 ) 或 document. 表单名称. 复选框对象名称. 属性 document. 表单名称. 复选框对象名称. 方法 ( 参数群 ) 9 9
复选框对象 (checkbox) 2. 属性 name: 复选按钮对象的名字 (NAME 属性 ) checked: 设置复选按钮是否被选中 length: 返回复选按钮的个数 type: 设置复选按钮的类型 (checkbox) value: 返回复选按钮的值 3. 方法 blur() 把焦点从该对象上移开 focus() 把焦点移到该对象上 click() 在该对象上单击鼠标左键 10 10
复选框对象 (checkbox) 4. 事件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 11 11
复选框对象 (checkbox) 5. 举例 : 选择颜色 <Script> function count() { var checkcount=0; var num = document.form1.elements.length; for (var i=0; i<num; i++) {if (document.form1.elements[i].checked) checkcount++; } alert (" 你喜欢 "+ checkcount + " 种颜色 ") } </Script> <FORM NAME=form1> 请选择你喜欢的颜色 :<BR> <INPUT TYPE="checkbox" NAME="red"> 红色 <INPUT TYPE="checkbox" NAME="green"> 绿色 <INPUT TYPE="checkbox" NAME="blue"> 蓝色 <BR> <INPUT TYPE="button" VALUE=" 请单击 " onclick=count()> </FORM> 12 12
当 JavaScript 读到 <SELECT> 标记时, 自动建立一个选择对象, 并将该对象放 到表单对象的 elements 数组当中 下拉列表对象 (select) 1. 使用选择对象的格式 document.forms[ 索引值 ].elements[ 索引值 ]. 属性 document.forms[ 索引值 ].elements[ 索引值 ]. 方法 ( 参数群 ) 或 document. 表单名称. 选择对象名称. 属性 document. 表单名称. 选择对象名称. 方法 ( 参数群 ) 13 13
下拉列表对象 (select) 2. 属性 name: 该对象的名字 (NAME 属性 ) options: 数组属性, 表示下拉列表中的选项 length: 返回下拉列表中选项 (Option) 的数目 selectedindex: 返回下拉列表所选择项对应目的索引 ( 选到第一项, 返回 0) 3. 方法 blur() 把焦点从该对象上移开 focus() 把焦点移到该对象上 14 14
选择对象 4. 事件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 15 15
选项对象 (option) 1. 建立选项对象的格式 var 选择对象名 = new Option( ) 16 16
2. 属性 name: 该对象的名字 (NAME 属性 ) defaultselected: 指定该选项为默认选择状态 index: 返回所选项的索引值 text: 设置或返回某选项所显示的提示字符串 3. 方法 blur() 把焦点从该对象上移开 focus() 把焦点移到该对象上 选项对象 (option) 17 17