《第十六章JavaScript_表单验证与特效》-公开课件.ppt

谢谢！ * * * * * * * * * JavaScript－10 表单验证与特效 WEB基础 目标 制作回车切换输入的效果 鼠标经过，表格当前行变色 全选/反选多个复选框 选项卡制作 表单验证 制作回车切换输入的效果 输入完毕后回车，默认会提交表单。 如何制作回车Tab切换效果？ 制作回车切换输入的效果 1、 使用键盘输入事件onKeyDown事件 2、 检查输入是否是回车键－ASCII码13，若是则将 输入改为Tab键－ASCII码9 script language=javascript type=text/javascript function changeFocus( ){ if (event.keyCode==13) event.keyCode=9; } /script …… INPUT name=sname type=text class=borderBox onKeyDown=changeFocus( ) …… 键盘按下，调用实 现Tab效果的函数 修改回车键为Tab键 Event事件对象包含输入键信息 制作回车切换输入的效果 上述注册页面中，需要给每个文本框添加键盘按 下事件，有没有更简单的办法？ …… INPUT name=sname type=text class=borderBox onKeyDown=changeFocus( ) …… INPUT name=pass type=password class=borderBox id=pass size=25 onKeyDown=changeFocus( ) INPUT name=email type=text class=borderBox …… id=email size=24 onKeyDown=changeFocus( ) 制作回车切换输入的效果 通过给document对象添加键盘事件。 script language=javascript function changeFocus( ){ if (event.keyCode==13 event.srcElement.type!=button event.srcElement.type!=submit …) event.keyCode=9; } document.onKeyDown= changeFocus ; /script 如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换 document对象的onKeyDown事件，它将接收页面中所有的键盘事件 鼠标划过表格行变色 如何实现鼠标悬停时，表格行变色; 鼠标移出后复原？ 在每一行tr标签内加上onmouseover和onmouseout事件，动态改变行的样式表 案例分析 能否通过程序来实现：在每一行tr标签内添加onmouseover和onmouseout事件及处理程序? script function Over(o) { o.style.backgroundColor=#CCC; } function Out(o) { o.style.backgroundColor=#FFF; } /script 要在每一行上，手动地添加鼠标移入移出事件 tr onmouseove=Over(this); onmouseout=Out(this); 如果表格行数很多时，就显得很繁琐，有没有更简便的方法？ 制作思路 实现思路： 使用getElementById( )方法获得表格对象 遍历表格对象下的rows集合，动态添加鼠标移入移出事件及处理程序 编写脚本 var obj=document.getElementById(tb); for(var i=0;iobj.rows.length;i++){ //循环表格行设置鼠标事件 obj.rows[i].onmouseover=function(){this.style.background=#2323FF;} obj.rows[i].onmouseout=function(){this.style.background=;} } 鼠标划过表格行变色-代码 style type=text/css #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;bo