北大青 7E 男 第十章 处理表单和表单元素事件 ACCP V4.0
ACCP V4.0 第十章 处理表单和表单元素事件
北大青鸟 TEC 回顾 口常用的浏览器对象有哪些? 口希望在网页打开时,就伴随弹出广告窗口,应使用什么事 件?打开广告窗口使用 window对象的哪个方法? 口 history对象的哪个方法相当于浏览器中的后退按钮? 口希望动态改变网页的背景色,应使用哪个对象的 bgColor 属性? 口l的地址栏对应哪个浏览器对象?它用来保存网页的地址 信息 ACCP V4.0
ACCP V4.0 2 回顾 ❑ 常用的浏览器对象有哪些？ ❑ 希望在网页打开时，就伴随弹出广告窗口，应使用什么事 件？打开广告窗口使用window对象的哪个方法？ ❑ history对象的哪个方法相当于IE浏览器中的后退按钮？ ❑ 希望动态改变网页的背景色，应使用哪个对象的bgColor 属性？ ❑ IE的地址栏对应哪个浏览器对象？它用来保存网页的地址 信息
北大青 7E 男 目标 口使用与以下各项关联的事件处理程序: 口文本框 口文本区域 口命令按钮 口复选框 单选按钮 口组合框 口编写用于验证表单的 JavaScript代码 ACCP V4.0
ACCP V4.0 3 目标 ❑使用与以下各项关联的事件处理程序 ： ❑文本框 ❑文本区域 ❑命令按钮 ❑复选框 ❑单选按钮 ❑组合框 ❑编写用于验证表单的 JavaScript 代码
北大青 7E 男 事件处理程序和 表单元素简介2-1 口当事件发生时,将执行与之相关的 JavaScript代 码 <| NPUT type=“ button” value=注册 on Click="button click 当发生特定事件时,事件处理程序指定要执行哪些 Javascrip?t代码 ACCP V4.0
ACCP V4.0 4 事件处理程序和 表单元素简介 2-1 ❑当事件发生时，将执行与之相关的 JavaScript 代 码 当发生特定事件时，事件处理程序指定要执行哪些 JavaScript 代码
北大青 男 事件处理程序和 7E 表单元素简介2-2 按事件处理程序 Microsoft Internet Eplorer 文件()编辑(E)查看(收藏(A)工具①帮助 后退→·③|③国收夹分媒体③当 地址|] C: \China\code snippet. html 转到链接” 欢迎来到我的网站 注册 Microsoft Internet Explorer xl function button_click( 请向本网站注册 alert(“请向本网站注册) 确定 回我的电脑 < INPUT type=“ button” value=“注册 消息。 I onClick="button_click ACCP V4.0
ACCP V4.0 5 事件处理程序和 表单元素简介 2-2 当用户单击“注册”按钮时，将弹出一条消息。 function button_click() { alert(“请向本网站注册); }
北大青 7E 男 文本框对象 口文本框元素用于在表单中输入字、词或一系列数 字 口可以通过将HTML的NPUT标签中的type设置 为“text",以创建文本框元素 ACCP V4.0
ACCP V4.0 6 文本框对象 ❑文本框元素用于在表单中输入字、词或一系列数 字 ❑可以通过将 HTML 的 INPUT 标签中的 type 设置 为“text”，以创建文本框元素
北大青 男 文本框对象一 事件处理程序 文事件onB|ur文本框失去焦点 本框 on Change文本框的值被修改 onFocus光标进入文本框中 方法 focus()获得焦点,即获得鼠标光标 select()选中文本内容,突出显示输入区域 属性 readonly只读,文本框中的内容不能修改 ACCP V4.0
ACCP V4.0 7 文本框对象 – 事件处理程序 文 本 框 事件 onBlur 文本框失去焦点 onChange 文本框的值被修改 onFocus 光标进入文本框中 方法 focus( ) 获得焦点，即获得鼠标光标 select( ) 选中文本内容，突出显示输入区域 属性 readonly 只读，文本框中的内容不能修改
淘宝网》睾 北大青 男 点 文本框对 E myform card 单价:25.00 price 数量: number 总价: 0.00 tot 我要买 193(182)v 219(209 Inputpricey 441 x 236-13 K/2 El ACCP V4.0
ACCP V4.0 8 文本框对象 card price number tot myform
北大青 7E 男 文本框对象 添加无边框样式 附加apat的Css样式定义 body 分类 边框 新建 编辑 样式 宽度 全部相同()全部相同) 重命名麼 上①) 像素qx) 重制 右a):线 团像素qx) 册除 下0):顶线 像素@x) CSs样式定义 左国线2 像素() input I font-size: 15px: border: 1px olid: 1 完成 帮助 ACCP V4.0
ACCP V4.0 9 文本框对象 添加无边框样式
<SCR| PT language=" Java onFocus事件调用的函数 clearText()清空 function clear Texto) 帐号文本框中的内容 if( document myform card.vaUe="输入您的会员帐号") document. myform card. value= on blur事件调用的函数 check()检查输入的帐 function check( 号是否是“10”打头,并且是数字 var a=document. myform card value if (asubstr(0, 2)!=10 isNaN(a)) alert(("格式错误,请重新输入"); document myform card. focus() 帐号:〖8946 document myform card. select() on Change事件调用的函数 compute(用来计 function compute 算总价 var price= document. myform price value var number= document. myform number value document myformtot value= price*number
ACCP V4.0 10 文本框对象 - onChange 事件处理程序 function clearText( ) { if (document.myform.card.value=="输入您的会员帐号") document.myform.card.value="" ; } function check( ) { var a=document.myform.card.value; if (a.substr(0,2)!="10" || isNaN(a)) { alert("格式错误，请重新输入") ; document.myform.card.focus( ); document.myform.card.select( ); } } function compute( ) { var price= document.myform.price.value; var number= document.myform.number.value ; document.myform.tot.value= price*number; } onFocus事件调用的函数clearText（）清空 帐号文本框中的内容 onBlur事件调用的函数check（）检查输入的帐 号是否是“10”打头，并且是数字 onChange事件调用的函数compute( )用来计 算总价