Question

我有一个表单，其中包含一个用户需要输入的字段，单击下面的按钮，会执行一些jQuery并隐藏登录表单。但是当我在输入内容后点击输入时，页面会刷新...

我的一部分认为它不需要是<input>或<form>

我实际上不需要发布任何内容。我已经尝试将输入更改为<button>，这完全破坏了我的样式，仍然无法正常工作。绕过这个最好的方法是什么？

<div class="login-page">
    <div class="form">
    <form class="login-form" method="POST">

   <!-- user inputs -->
   <p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />

   <!-- your submit button -->
   <input class="login" type="button" id="submit" value="login">
</div>

Answer 1

您需要将keypress事件附加到表单或至少字段。为方便起见，您还需要将回调函数合并为一个。

$('#username').on('keypress', function(event){
    var code = event.keyCode || event.which;
    if(code == 13){ 
        // submit the form.
    }
});

$('#username').on('keypress', function(event){
    var code = event.keyCode || event.which;
    if(code == 13){ 
        console.log('Submitting form');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="login-form" method="POST">
   <p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
   <input class="login" type="button" id="submit" value="login">
</form>

Answer 2

是的，亚当。如果表单不包含类型 submit 按钮，则必须手动添加按键事件。否则， Enter 将作为表单上的接受按钮。

Answer 3

如果在聚焦到具有提交按钮的表单内的输入字段时按下回车键，则默认浏览器行为是在该表单上触发提交事件。您可以通过以下任一方式防止这种情况发生：

return false; 要么 e.preventDefault();

完整代码：

$('.login-form').on('submit', function() {
    return false;
});

小提琴：https://jsfiddle.net/nc1e2gm6/

请记住，如果您沿着使用e.preventDefault();或return false;的路线前进，则需要从函数调用中传递e变量，例如：

$('.login-form').on('submit', function(e) { ...

Answer 4

不要以为我解释得很好但我修好了，输入键现在激活提交按钮而不是刷新页面。

$("form").submit(function() { return false; });

$(document).ready(function(){
    $('#username').keypress(function(e){
      if(e.keyCode==13)
      $('#submit').click();
    });
});

Enter键不激活按钮

4 个答案: