回车登录页面制作

最新推荐文章于 2021-03-17 07:34:51 发布

wangweicmon236

最新推荐文章于 2021-03-17 07:34:51 发布

阅读量701

点赞数

登录页面有很多习惯性的操作，比如打开页面，焦点在要输入的文本框；按TAB键，光标会按一定的顺序切换；输入完毕，压下回车等等，你也可以轻松实现，看下面页面的一个例子：

</HEAD>
<BODY ONLOAD="window.document.forms[0].USERNAME.focus();">
<FORM ACTION="" NAME="TEST" METHOD="POST">
用户名：<INPUT TYPE="TEXT" NAME="USERNAME" tabindex="1"><BR>
密&nbsp&nbsp码：<INPUT TYPE="TEXT" NAME="PASSWORD" tabindex="2"><BR>
<INPUT TYPE="BUTTON" NAME="TBUTTON" VALUE="回车" οnclick="alert('已经点击！！');" tabindex="3">
</FORM>
</BODY>
</HTML>

其中脚本部分，是相应回车键的，TBUTTON为相应的按钮名称；
BODY中ONLOAD为打开页面时加载操作，在此确定焦点所在，USERNAME为相应的控件名称；
各个控件中tabindex为TAB顺序。

另一种，类似的方法：

<HTML>
<HEAD>
<TITLE> Enter Event </TITLE>

<script language="javascript">
function enterkey()
{
try
{
     var el_keydown=window.event.srcElement;
       if(event.keyCode==13 && el_keydown.id=="txt1")
        {
            txt2.focus();
       }
       else if(event.keyCode==13 && el_keydown.id=="txt2")
       {
           btn.focus();
       }
   }
   catch(e)
   {
        return;
   }
}

</script>

</HEAD>

<BODY>
<input type="text" id="txt1" onkeyDown="enterkey();" ><br>
<input type="text" id="txt2" onkeyDown="enterkey();" ><br>
<input type="button" id="btn" value="button" onClick="alert(txt2.value)" >
</BODY>
</HTML>

wangweicmon236

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回车登录页面制作

登录页面有很多习惯性的操作，比如打开页面，焦点在要输入的文本框；按TAB键，光标会按一定的顺序切换；输入完毕，压下回车等等，你也可以轻松实现，看下面页面的一个例子：登录页面 if(event.keyCode==13) { document.all(TBUTTON).click(); } --> ONLOAD="window.document.forms[0]
复制链接

扫一扫