任务2-3　回车后自动切换输入焦点的实现

需求：

在用户名文本框中按【Enter】键将光标移入密码文本框，在密码文本框中按【Enter】键将光标移入“提交”按钮。在用户名文本框和密码文本框失去焦点时检查是否为空，为空则不许焦点移出。

分析：

本任务涉及客户端的键盘事件和设置焦点的方法调用。

实现：

第一步，新建文件夹03，将任务2-2的页面复制到03文件夹中。

第二步，将“提交”按钮的类型属性type值从submit改为button，以免在按【Enter】键时触发“submit”类按钮单击事件。

第三步，设置用户名文本框和密码文本框的事件处理所用函数：

用户名文本框：onkeyup="txtUserName_keyup（）"；

密码文本框：onkeyup="txtPassword_keyup（）"。

第四步，编写事件处理函数的函数体，代码如清单2-8所示。

清单2-8　提交按钮的键盘事件处理函数的定义

第五步，在body标签中添加onload事件处理代码，实现用户名文本框在打开登录界面时获得焦点。代码为：onload="document.getElementById（'txtUserName'）.focus（）；"。

说明

还有一种更为简单js编程思想，当键盘按下时，如果事件按键码event.keyCode是【Enter】键，则将用【Tab】键代替之。在每个文本框中设置下列属性onkeydown为“if（event.keyCode==13）event.keyCode=9”即可。