当我按回车键,无法登录

时间:2013-10-22 06:21:28

标签: javascript html5 keystroke

我一直在尝试使用回车键登录到离线HTML / CSS页面但无法启动JavaScript,我需要确定。

但是当我点击我创建的登录按钮时,可以使用鼠标登录..

如何使用enter键笔划登录?

这是我使用鼠标点击进行凭证测试的硬编码的javascript ..我想要输入密钥..谢谢。

<!DOCTYPE HTML>
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<div align="center">
<div id="bor">

<h1>
   Login Page
</h1>

<div>
<form name="login">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
 <input type="password" placeholder="Enter the Password" name="pwd"/><br /><br />
 <input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</div>


<script language="javascript">
function check(form)
{
   if(form.user.value == "user" && form.pwd.value == "pwd")
   {
       window.open('inbox.html','_self')
   }
   else
   {
       alert("Error Password or Username")
   }
}
</script>

1 个答案:

答案 0 :(得分:1)

使用提交事件处理程序。单击元素上的单击处理程序只有在单击它时才会触发。您要做的是提交表单,但使用javascript而不是服务器处理表单。我建议动态绑定,但是因为你有这里的所有javascript内联,我也会举例说明。

您需要将一个提交事件处理程序附加到表单元素。如果您内联,则可以使用onsubmit="..."。返回是为了防止/允许将表单提交给服务器。如果函数返回'true',则表单将提交给服务器。如果函数返回'false',则不会提交表单。您还需要将提交按钮的类型更改为submit。如果单击该按钮,这将告诉浏览器提交表单。或者,如果您在输入字段中按Enter键,浏览器也会将此视为提交表单。

<form name="login" onsubmit="return check(this)">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
  <input type="password" placeholder="Enter the Password" name="pwd"/><br/><br/>
  <input type="checkbox" name="en" value="en" />Remember Me<br>
  <input type="submit" value="Login"/>
  <input type="reset" value="Cancel"/>
</form>

它背后的javascript将保持大致相同。您会注意到我们已将this传递给该函数。这会将元素本身(在本例中为表单元素)传递给函数。如前所述,您需要返回false。我已将form更改为frm,因为form在某些浏览器中是全局定义的变量。

function check(frm)
{
   if(frm.user.value == "user" && frm.pwd.value == "pwd")
   {
       window.open('inbox.html','_self')
   }
   else
   {
       alert("Error Password or Username")
   }

   return false;
}

示例jsfiddle:http://jsfiddle.net/AS5t5/