处理表单和表单元素事件

处理表单和表单元素事件处理表单和表单元素事件安博教育天津长城实训基地2 回顾 • 常用的浏览器对象有哪些？ • 希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？ • history对象的哪个方法相当于IE浏览器中的后退按钮？ • 希望动态改变网页的背景色，应使用哪个对象的 bgColor属性？ • IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息安博教育天津长城实训基地3 目标 • 使用与以下各项关联的事件处理程序： –文本框 –文本区域...

处理表单和表单元素事件安博教育天津长城实训基地2 回顾 • 常用的浏览器对象有哪些？ • 希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？ • history对象的哪个方法相当于IE浏览器中的后退按钮？ • 希望动态改变网页的背景色，应使用哪个对象的 bgColor属性？ • IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息安博教育天津长城实训基地3 目标 • 使用与以下各项关联的事件处理程序： –文本框 –文本区域 –命令按钮 –复选框 –单选按钮 –组合框 • 编写用于验证表单的 JavaScript 代码安博教育天津长城实训基地4 事件处理程序和表单元素简介 2-1 • 当事件发生时，将执行与之相关的 JavaScript 代码当发生特定事件时，事件处理程序指定要执行哪些 JavaScript 代码当发生特定事件时，事件处理程序指定要执行哪些 JavaScript 代码安博教育天津长城实训基地5 事件处理程序和表单元素简介 2-2 当用户单击“注册”按钮时，将弹出一条消息。安博教育天津长城实训基地6 文本框对象 • 文本框元素用于在表单中输入字、词或一系列数字 • 可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素安博教育天津长城实训基地7 文本框对象 – 事件处理程序获得焦点，即获得鼠标光标focus( ) 选中文本内容，突出显示输入区域 select( ) 方法属性事件只读，文本框中的内容不能修改 readonly 光标进入文本框中onFocus 文本框的值被修改onChang e 文本框失去焦点onBlur文本框安博教育天津长城实训基地8 文本框对象 card price number tot myform 安博教育天津长城实训基地9 文本框对象添加无边框样式安博教育天津长城实训基地10 文本框对象 - onChange 事件处理程序单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品

是为了原样显示字
符串中的换行”\n”格式


function buy( )
{
var s="";
for (var i=0;i< document.myform.mybox.length;i++)
{
//判断第i个复选框是否被选中
if (document.myform.mybox[i].checked==true)

s=s+document.myform.mybox[i].value+"\n";
}
if(confirm("您准备购买以下物品，确定吗？：\n"+s)==true)

document.write("您购买了以下物品:"+s+"");
}

//…其他代码略


//…其他代码略

2.使用数组和for循环
大大简化代码

1.修改每个复选框的名称都为mybox，使
这4个复选框构成一个数组mybox



安博教育天津长城实训基地21

单选按钮对象

• 当用户只需要从选项列表中选择一个选项
时，可以使用单选按钮对象

• 要创建单选按钮对象，请使用  标
签

男
女



安博教育天津长城实训基地22

单选按钮 -事件和属性

单选按钮获得焦点onFocus
单选按钮失去焦点onBlur事件

属性 单选按钮是否被选
中，选中为true，未
选中为false。您可

以使用此属性查看单
选按钮的状态或设置
单选按钮是否被选中

checked

设置或获取单选按钮
的值

value

单选按
钮
· 单选按钮被选定或取

消选定
onClick



安博教育天津长城实训基地23

单选按钮-事件处理程序

为了保证单选，两个单选按钮的名
称都为myradio，组成了myradio数

组



安博教育天津长城实训基地24

单选按钮－事件处理程序