如何在用户按下输入键盘时在javascript中提交表单

时间:2014-05-26 20:45:57

标签: javascript html

我可以在html中添加什么代码或什么代码。或者js。文件,以便当有人按下输入键盘时提交表单? 这是我的html文件

<!DOCTYPE html>
<html>
<head>
  <title>test Form</title>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>


 <h3>Start Here</h3>
   UserName: <input type="text" id="user"><br>

    Master Code: <input type = "password" id = "pass"><br><br>


   <input type="submit" value="Submit" onclick= "check()">
</body>
</html>

,这是我的外部javascript文件

function check()
{
var t = document.getElementById("user").value;
var m = document.getElementById("pass").value;

 if (t === "username")
 {
    if(m === "password")
    {
        document.write("SUCCESS!")
    }

    else if (m != "tete")
    {
        document.write("wrong password");
    }
 }

 else {
    document.write("ERROR!")
 }

}

1 个答案:

答案 0 :(得分:0)

您需要添加一些内容。更改代码,以便按预期工作:

  • 将您的字段和提交按钮打包到form
  • 取消表单子目标事件
  • 不要直接写入文档,但使用输出面板,例如div。这样你甚至可以构建一个非常简单的日志面板。

包含上述更改的代码:

<!DOCTYPE html>
<html>
<head>
  <title>test Form</title>
  <script type="text/javascript">
    function check()
    {
        var t = document.getElementById("user").value;
        var m = document.getElementById("pass").value;
        // get the "output" panel
        var o = document.getElementById("output");

        if (t === "username")
        {
            if(m === "password")
            {
                // add text to the div as simple log
                o.innerHTML += "SUCCESS!<br />";
            }
            else if (m != "tete")
            {
                o.innerHTML += "wrong password<br />";
            }
        }
        else 
        {
            o.innerHTML += "ERROR!<br />";
        }
        // bind to the submit event and cancel it, to prevent realod!
        document.getElementById('form1').onsubmit = function() {
            return false;
        }
    }
  </script>
</head>
<body>
    <!-- wrap your code in a form that gets submited on enter keypress -->
    <form id="form1" action="#" method="post">
        <h3>Start Here</h3>
        UserName: <input type="text" id="user"><br>
        Master Code: <input type = "password" id = "pass"><br><br>
        <input type="submit" value="Submit" onclick= "check()">
        <div id="output"></div>
   </form>
</body>
</html>

当用户按下回车键或提交按钮时,将提交数据。