如何使用输入键击提交用户名和密码

时间:2017-10-16 12:52:22

标签: javascript jquery html onkeypress

我有一个工作正常的登录按钮,它会记录用户等等。但我想让用户按下回车键也可以登录。我该怎么做。我尝试使用onkeypress进行测试,但它没有做任何事情如下所示

<form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Username id="username" />
       </div>
      <div class="form-group">
      <input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction() /> //i just tried this myFunction() to see if it would give an alert but it doesnt
      </div>
     <div class="form-group">
   <button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>

  </div>
  </div>
  </form>

function myFunction()
 { alert("button pressed")}

那么如何使用enter键在javascript和jquery中提交我的请求

2 个答案:

答案 0 :(得分:1)

由于您已将input置于包含提交按钮的form元素中,因此默认情况下会出现此行为。要挂钩,请使用表单的submit事件,如下所示:

&#13;
&#13;
$('form').on('submit', function(e) {
  e.preventDefault(); // only used to stop the form submission in this example
  console.log('form submitted');
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Username" id=" username" />
  </div>
  <div class="form-group ">
    <input type="password" class="form-control" placeholder="........" id="password" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
  </div>
</form>
&#13;
&#13;
&#13;

请注意,我修复了第一个"placeholder属性之后的遗失input。在所有属性值之后你也不需要尾随空格,所以我也删除了它们。

答案 1 :(得分:0)

首先,您需要将事件发送到myFunction()函数并向表单添加ID以手动添加提交::

HTML

<form id='myForm'>
<!-- form actions (etc..) -->
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction(e) />
<!-- form actions (etc..) -->
</form>

现在在ASCII中,重新输入代码为13您需要检查的是当按下的键重新输入时(13)然后您需要获取事件键代码并调用提交函数::

function myFunction(e)
var code = (e.keyCode ? e.keyCode : e.which);
{
   if (code == "13")
    {
        //Calling the submit or clicking manually it 
        $( "#myForm" ).submit();   
    }
}