本文介绍了一个简单的登录页面示例，通过HTML和JavaScript实现了常见的键盘交互功能，如自动聚焦输入框、使用Tab键切换输入框及回车键提交等功能。
登录页面有很多习惯性的操作，比如打开页面，焦点在要输入的文本框；按TAB键，光标会按一定的顺序切换；输入完毕，压下回车等等，你也可以轻松实现，看下面页面的一个例子：
<HTML>
<HEAD>
<TITLE> 登录页面 </TITLE>
<script language="javascript" event="onkeydown" for="document">
<!--
if(event.keyCode==13)
{
document.all('TBUTTON').click();
}
-->
</script>
</HEAD>
<BODY ONLOAD="window.document.forms[0].USERNAME.focus();">
<FORM ACTION="" NAME="TEST" METHOD="POST">
用户名：<INPUT TYPE="TEXT" NAME="USERNAME" tabindex="1"><BR>
密  码：<INPUT TYPE="TEXT" NAME="PASSWORD" tabindex="2"><BR>
<INPUT TYPE="BUTTON" NAME="TBUTTON" VALUE="回车" onclick="alert('已经点击！！');" tabindex="3">
</FORM>
</BODY>
</HTML>
其中脚本部分，是相应回车键的，TBUTTON为相应的按钮名称；
BODY中ONLOAD为打开页面时加载操作，在此确定焦点所在，USERNAME为相应的控件名称；
各个控件中tabindex为TAB顺序。
扫一扫
1855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
